这是一个双重问题：
当您不知道模态框的确切高度时，如何使其垂直居中？
如果模态框超出屏幕高度，是否可以将模态框居中并在模态框主体中使用overflow:auto属性？
我尝试过使用以下内容：
.modal-dialog {
height: 80% !important;
padding-top:10%;
}
.modal-content {
height: 100% !important;
overflow:visible;
}
.modal-body {
height: 80%;
overflow: auto;
}
当内容远大于竖屏幕尺寸时，这为我提供了所需的结果，但对于小型模态框内容来说，它几乎无法使用。
.modal {
text-align: center;
}
@media screen and (min-width: 768px) {
.modal:before {
display: inline-block;
vertical-align: middle;
content: " ";
height: 100%;
}
}
.modal-dialog {
display: inline-block;
text-align: left;
vertical-align: middle;
}
稍微调整一下 .fade 类，以确保它出现在窗口的顶部边界而不是中心位置
display: inline-block。 - macemers1. 当你不知道模态框的确切高度时，如何使模态框在垂直方向上居中？
要实现在不声明高度的情况下绝对居中 Bootstrap 3 模态框，你需要通过将以下代码添加到你的样式表中来覆盖 Bootstrap CSS：
.modal-dialog-center { /* Edited classname 10/03/2014 */
margin: 0;
position: absolute;
top: 50%;
left: 50%;
}
这将使模态对话框的左上角位于窗口中心。
我们必须添加此媒体查询，否则在小型设备上，模态边距会出现错误：
@media (max-width: 767px) {
.modal-dialog-center { /* Edited classname 10/03/2014 */
width: 100%;
}
}
$('.modal').on('shown.bs.modal', function() {
$(this).find('.modal-dialog').css({
'margin-top': function () {
return -($(this).outerHeight() / 2);
},
'margin-left': function () {
return -($(this).outerWidth() / 2);
}
});
});
.modal {
text-align: center;
padding: 0!important;
}
.modal:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -4px; /* Adjusts for spacing */
}
.modal-dialog {
display: inline-block;
text-align: left;
vertical-align: middle;
}
注意负的右外边距吗？这将消除inline-block添加的空间。那个空间会导致模态框在@media width < 768px下跳到页面底部。
2. 如果模态框超出屏幕高度，是否可能使其居中并在modal-body中使用overflow:auto？
可以通过为modal-body设置overflow-y:auto和max-height来实现此目的。这需要更多的工作才能使其正常工作。首先，在样式表中添加以下内容：
.modal-body { overflow-y: auto; } .modal-footer { margin-top: 0; }
我们将再次使用jQuery来获取窗口高度，并首先设置modal-content的最大高度。然后我们必须通过将modal-header和modal-footer从modal-content中减去来设置modal-body的最大高度：
$('.modal').on('shown.bs.modal', function() { var contentHeight = $(window).height() - 60; var headerHeight = $(this).find('.modal-header').outerHeight() || 2; var footerHeight = $(this).find('.modal-footer').outerHeight() || 2; $(this).find('.modal-content').css({ 'max-height': function () { return contentHeight; } }); $(this).find('.modal-body').css({ 'max-height': function () { return (contentHeight - (headerHeight + footerHeight)); } }); $(this).find('.modal-dialog').css({ 'margin-top': function () { return -($(this).outerHeight() / 2); }, 'margin-left': function () { return -($(this).outerWidth() / 2); } }); });
您可以在这里找到使用Bootstrap 3.0.3的演示版本：http://cdpn.io/GwvrJ
function setModalMaxHeight(element) {
this.$element = $(element);
this.$content = this.$element.find('.modal-content');
var borderWidth = this.$content.outerHeight() - this.$content.innerHeight();
var dialogMargin = $(window).width() < 768 ? 20 : 60;
var contentHeight = $(window).height() - (dialogMargin + borderWidth);
var headerHeight = this.$element.find('.modal-header').outerHeight() || 0;
var footerHeight = this.$element.find('.modal-footer').outerHeight() || 0;
var maxHeight = contentHeight - (headerHeight + footerHeight);
this.$content.css({
'overflow': 'hidden'
});
this.$element
.find('.modal-body').css({
'max-height': maxHeight,
'overflow-y': 'auto'
});
}
$('.modal').on('show.bs.modal', function() {
$(this).show();
setModalMaxHeight(this);
});
$(window).resize(function() {
if ($('.modal.in').length != 0) {
setModalMaxHeight($('.modal.in'));
}
});
(更新于2015年11月30日 http://cdpn.io/mKfCc，以上编辑已生效)
我的解决方案
.modal-dialog-center {
margin-top: 25%;
}
<div id="waitForm" class="modal">
<div class="modal-dialog modal-dialog-center">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 id="headerBlock" class="modal-title"></h4>
</div>
<div class="modal-body">
<span id="bodyBlock"></span>
<br/>
<p style="text-align: center">
<img src="@Url.Content("~/Content/images/progress-loader.gif")" alt="progress"/>
</p>
</div>
</div>
</div>
</div>
只需使用display: flex即可轻松解决。
.modal-dialog {
margin-top: 0;
margin-bottom: 0;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
}
.modal.fade .modal-dialog {
transform: translate(0, -100%);
}
.modal.in .modal-dialog {
transform: translate(0, 0);
}
带前缀
.modal-dialog {
margin-top: 0;
margin-bottom: 0;
height: 100vh;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.modal.fade .modal-dialog {
-webkit-transform: translate(0, -100%);
transform: translate(0, -100%);
}
.modal.in .modal-dialog {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
如果您愿意使用 flexbox，那么这将有助于解决它。
.modal-dialog {
height: 100%;
width: 100%;
display: flex;
align-items: center;
}
.modal-content {
margin: 0 auto;
}
pointer-events: none 添加到 .modal-dialog 并将 pointer-events: auto 添加到 .modal-content。因为 .modal-dialog {height: 100%} 覆盖了模态框上下的整个列，并且禁止用户在该区域内点击背景。 - wuct我的解决方案：
.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%);
}
我想出了一个纯CSS的解决方案！不过这是CSS3，也就是说不支持IE8或更低版本，但除此之外，它已在iOS、Android、IE9+、Chrome、Firefox和桌面版Safari上进行了测试并且可以正常工作。
我正在使用以下CSS：
.modal-dialog {
position:absolute;
top:50% !important;
transform: translate(0, -50%) !important;
-ms-transform: translate(0, -50%) !important;
-webkit-transform: translate(0, -50%) !important;
margin:auto 5%;
width:90%;
height:80%;
}
.modal-content {
min-height:100%;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
}
.modal-body {
position:absolute;
top:45px; /** height of header **/
bottom:45px; /** height of footer **/
left:0;
right:0;
overflow-y:auto;
}
.modal-footer {
position:absolute;
bottom:0;
left:0;
right:0;
}
这里有一个代码片段。 http://codepen.io/anon/pen/Hiskj
..选择这个作为正确答案，因为没有额外的重型Javascript，在有多个模态框的情况下也不会导致浏览器崩溃。
添加这个简单的CSS也可以起作用。
.modal-dialog {
height: 100vh !important;
display: flex;
}
.modal-content {
margin: auto !important;
height: fit-content !important;
}
在我的情况下，我所做的就是在我的CSS中设置模态框的高度，并将其设为顶部。
<div id="myModal" class="modal fade"> ... </div>
在我的CSS中我设置了：
#myModal{
height: 400px;
top: calc(50% - 200px) !important;
}
可以使用 CSS 来实现这个最简单的方法：
.modal-dialog {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width:500px;
height:300px;
}
就是这样。请注意，它只需要应用于.modal-dialog容器div。