这个问题分为两部分:

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

我试过用这个:

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

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

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

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


当前回答

没那么复杂。

请试试这个:

$(document).ready(function(){
    var modalId = "#myModal";
    resize: function(){
            var new_margin = Math.ceil(($(window).height() - $(modalId).find('.modal-dialog').height()) / 2);
            $(modalId).find('.modal-dialog').css('margin-top', new_margin + 'px');
    }
    $(window).resize(function(){
        resize();
    });
    $(modalId).on('shown.bs.modal', function(){
        resize();
    });
});

其他回答

$('#myModal').on('shown.bs.modal', function() {
    var initModalHeight = $('#modal-dialog').outerHeight(); //give an id to .mobile-dialog
    var userScreenHeight = $(document).outerHeight();
    if (initModalHeight > userScreenHeight) {
        $('#modal-dialog').css('overflow', 'auto'); //set to overflow if no fit
    } else {
        $('#modal-dialog').css('margin-top', 
        (userScreenHeight / 2) - (initModalHeight/2)); //center it if it does fit
    }
});

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

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

.modal-content {
  margin: 0 auto;
}

我知道有点晚了,但我添加了一个新的答案,这样它就不会迷失在人群中。这是一个跨桌面-移动-浏览器的解决方案,在任何地方都能正常工作。

它只需要将模态对话框包装到模态对话框包装类中,并且需要添加以下代码:

.modal-dialog-wrap {
  display: table;
  table-layout: fixed;
  width: 100%;
  height: 100%;
}

.modal-dialog {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.modal-content {
  display: inline-block;
  text-align: left;
}

对话框从中心开始,在内容较大的情况下,它只是垂直增长,直到出现滚动条。

这里有一把能用的小提琴供你欣赏!

https://jsfiddle.net/v6u82mvu/1/

我已经从bellow link下载了bootstrap3-dialog,并修改了bootstrap-dialog.js中的open函数

https://github.com/nakupanda/bootstrap3-dialog

Code

open: function () {
            !this.isRealized() && this.realize();
            this.updateClosable();
            //Custom To Vertically centering Bootstrap 
            var $mymodal = this.getModal();
            $mymodal = $mymodal.append('<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%"><tr><td align="center" valign="middle" class="centerModal"></td></tr></table>');
            $mymodal = $mymodal.find(".modal-dialog").appendTo($mymodal.find(".centerModal"));
            //END
            this.getModal().modal('show');
            return this;
        }

Css

.centerModal .modal-header{
    text-align:left;
}
.centerModal .modal-body{
    text-align:left;
} 

扩展@Finik的精彩回答,这个修复只适用于非移动设备。我在IE8、Chrome和Firefox 22上进行了测试——它可以处理很长或很短的内容。

.modal {
  text-align: center;
}
@media screen and (min-device-width: 768px) {
  .modal:before {
    display: inline-block;
    vertical-align: middle;
    content: " ";
    height: 100%;
  }
}

.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}