这个问题分为两部分:

当你不知道模态的确切高度时,你如何将模态垂直地放置在中心? 是否有可能有模态居中,并有溢出:auto在模态体,但只有当模态超过屏幕高度?

我试过用这个:

.modal-dialog {
  height: 80% !important;
  padding-top:10%;
}

.modal-content {
  height: 100% !important;
  overflow:visible;
}

.modal-body {
  height: 80%;
  overflow: auto;
}

当内容远远大于垂直屏幕尺寸时,这给了我所需要的结果,但对于较小的模式内容,这几乎是不可用的。


当前回答

使用这个简单的脚本将情态动词居中。

如果你愿意,你可以设置一个自定义类(例如:.modal。mode -vcenter(而不是.modal)来限制某些模式的功能。

var modalVerticalCenterClass = ".modal";

function centerModals($element) {
    var $modals;
    if ($element.length) {
    $modals = $element;
    } else {
    $modals = $(modalVerticalCenterClass + ':visible');
}
$modals.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 > 0 ? top : 0;
    $clone.remove();
    $(this).find('.modal-content').css("margin-top", top);
    });
}
$(modalVerticalCenterClass).on('show.bs.modal', function(e) {
    centerModals($(this));
});
$(window).on('resize', centerModals);

还添加了这个CSS修复模式的水平间距;我们在模态上显示滚动,主体滚动被Bootstrap自动隐藏:

/* scroll fixes */
.modal-open .modal {
    padding-left: 0px !important;
    padding-right: 0px !important;
    overflow-y: scroll;
}

其他回答

我的解决方案:

.modal.in .modal-dialog 
{
    -webkit-transform: translate(0, calc(50vh - 50%));
    -ms-transform: translate(0, 50vh) translate(0, -50%);
    -o-transform: translate(0, calc(50vh - 50%));
    transform: translate(0, 50vh) translate(0, -50%);
}

您可能想要查看这个div绝对居中的方法集合:http://codepen.io/shshaw/full/gEiDt

试试这样做:

.popup__overlay {
    position: fixed;
    left:  0;
    top:  0;
    width: 100%;
    height: 100%;
    z-index: 999;
    text-align: center
    }
.popup {
    display: inline-block;
    vertical-align: middle
    } 

非常非常简单的方法来实现这个概念,你会得到模态总是在你的屏幕的模块css为flow: http://jsfiddle.net/jy0zc2jc/1/

你必须通过下面的css将模态类显示为表:

display:table

模态对话框为display:table-cell

见完整的工作例子在给定的小提琴

如果您可以使用flexbox,那么这应该有助于解决问题。

.modal-dialog {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
}

.modal-content {
  margin: 0 auto;
}