Ask and Learn

Bootstrap Modal 垂直居中

Bootstrap 的 modal 正文中如果内容较少的话,并不会垂直居中,而是偏上, 如果想要达到垂直居中的效果,需要自动动手了。

可以在初始显示时设置垂直居中,可以这样做:

$('#YourModal').modal().css({
    'margin-top': function () {
        return -($(this).height() / 2);
    }
});

或者我们可以将这个效果注册到显示事件中

*show: * This event fires immediately when the show instance method is called.

$('.modal').on('show', function() {
    $(this).css({
        'margin-top': function () {
            return -($(this).height() / 2);
        }
    });
});

参考资料