这个问题分为两部分:
当你不知道模态的确切高度时，你如何将模态垂直地放置在中心? 是否有可能有模态居中，并有溢出:auto在模态体，但只有当模态超过屏幕高度?
我试过用这个:
.modal-dialog {
height: 80% !important;
padding-top:10%;
}
.modal-content {
height: 100% !important;
overflow:visible;
}
.modal-body {
height: 80%;
overflow: auto;
}
当内容远远大于垂直屏幕尺寸时，这给了我所需要的结果，但对于较小的模式内容，这几乎是不可用的。
当前回答
对于定心，我不明白过于复杂的解决方案是什么。Bootstrap已经为你水平居中，所以你不需要搞砸这个。我的解决方案是只使用jQuery设置顶部边距。
$('#myModal').on('loaded.bs.modal', function() {
$(this).find('.modal-dialog').css({
'margin-top': function () {
return (($(window).outerHeight() / 2) - ($(this).outerHeight() / 2));
}
});
});
我在远程加载内容时使用了loaded.bs.modal事件，而使用show .ba.modal事件会导致高度计算不正确。当然，您可以添加一个事件来调整窗口的大小，如果您需要它的响应。
其他回答
下面是另一个css方法，它的工作原理非常好: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
萨斯:
.modal {
height: 100%;
.modal-dialog {
top: 50% !important;
margin-top:0;
margin-bottom:0;
}
//keep proper transitions on fade in
&.fade .modal-dialog {
transform: translateY(-100%) !important;
}
&.in .modal-dialog {
transform: translateY(-50%) !important;
}
}
我的解决方案:
.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%);
}
这对我来说很管用:
.modal {
text-align: center;
padding: 0!important;
}
.modal:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -4px;
}
.modal-dialog {
display: inline-block;
text-align: left;
vertical-align: middle;
}
从这里找到了完美的解决方案
$(function() {
function reposition() {
var modal = $(this),
dialog = modal.find('.modal-dialog');
modal.css('display', 'block');
// Dividing by two centers the modal exactly, but dividing by three
// or four works better for larger screens.
dialog.css("margin-top", Math.max(0, ($(window).height() - dialog.height()) / 2));
}
// Reposition when a modal is shown
$('.modal').on('show.bs.modal', reposition);
// Reposition when the window is resized
$(window).on('resize', function() {
$('.modal:visible').each(reposition);
});
});
非常非常简单的方法来实现这个概念，你会得到模态总是在你的屏幕的模块css为flow: http://jsfiddle.net/jy0zc2jc/1/
你必须通过下面的css将模态类显示为表:
display:table
模态对话框为display:table-cell
见完整的工作例子在给定的小提琴
