关于Bootstrap modal 垂直居中

最近学到了bootstrap的modal，发现它只是左右居中偏上，并不是垂直居中的，想把它弄成垂直也居中， 查了好多资料无果，最终去google了下，终于找到了合适的答案，转一些外文

方法一：style里加个css

.modal-vertical-centered {
  transform: translate(0, 50%) !important;
  -ms-transform: translate(0, 50%) !important; /* IE 9 */
  -webkit-transform: translate(0, 50%) !important; /* Safari and Chrome */
}

 然后dialog加上这个class就好了

<div class="modal-dialog modal-vertical-centered">

 方法二：只加一段js

$(function() {
function reposition() {
var modal = $(this),
dialog = modal.find('.modal-dialog');
modal.css('display', 'block');
//将margin-top定义为窗口高和dialog高的二分之一
dialog.css("margin-top", Math.max(0, ($(window).height() - dialog.height()) / 2));
}
// 模块show时，执行
$('.modal').on('show.bs.modal', reposition);
// 模块resize时执行
$(window).on('resize', function() {
$('.modal:visible').each(reposition);
});
});

 如果有浏览器不兼容大家再一起讨论