boostrap 模態框 居中問題

在網上找了不少方法，如下面兩個，自己寫方法修改，並不能很好的解決
https://blog.csdn.net/altaba/article/details/54669660 其中的第二種方法在頁面第一次加載之後彈出模態框還是會出現閃動，之後就不會了
https://www.cnblogs.com/web-wangmeng/p/5616174.html

直到找到 https://www.jb51.net/article/126219.htm
直接調用調用Boostrap提供的$(’.modal’).on(‘show.bs.modal’, function(){})方法
在模態框出現前修改Top值，也不需要修改源碼

function centerModals() { 
  $('.modal').each(function(i) { 
    var $clone = $(this).clone().css('display', 'block').appendTo('body'); 
    var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2); 
    top = top > 50 ? top : 0; 
    $clone.remove(); 
    $(this).find('.modal-content').css("margin-top", top - 50); 
  }); 
} 
// 在模態框出現的時候調用垂直居中方法 
$('.modal').on('show.bs.modal', centerModals); 
// 在窗口大小改變的時候調用垂直居中方法 
$(window).on('resize', centerModals);