这个问题分为两部分:
当你不知道模态的确切高度时，你如何将模态垂直地放置在中心? 是否有可能有模态居中，并有溢出:auto在模态体，但只有当模态超过屏幕高度?
我试过用这个:
.modal-dialog {
height: 80% !important;
padding-top:10%;
}
.modal-content {
height: 100% !important;
overflow:visible;
}
.modal-body {
height: 80%;
overflow: auto;
}
当内容远远大于垂直屏幕尺寸时，这给了我所需要的结果，但对于较小的模式内容，这几乎是不可用的。
当前回答
我想出了一个纯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会让浏览器崩溃。
其他回答
这是响应式代码，也打开不同大小的移动视图，请检查一次。
.modal {
text-align: center;
padding: 0!important;
}
.modal:before {
content: '';
display: inline-block;
height: 20%;
vertical-align: middle;
margin-right: -4px;
}
.modal-dialog {
display: inline-block;
text-align: left;
vertical-align: middle;
}
对于定心，我不明白过于复杂的解决方案是什么。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事件会导致高度计算不正确。当然，您可以添加一个事件来调整窗口的大小，如果您需要它的响应。
我知道有点晚了，但我添加了一个新的答案，这样它就不会迷失在人群中。这是一个跨桌面-移动-浏览器的解决方案，在任何地方都能正常工作。
它只需要将模态对话框包装到模态对话框包装类中，并且需要添加以下代码:
.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/
我写的最普遍的解。动态计算对话框高度。(下一步可能是重新计算窗口大小的对话框的高度。)
JSfiddle: http://jsfiddle.net/8Fvg9/3/
// initialise on document ready
jQuery(document).ready(function ($) {
'use strict';
// CENTERED MODALS
// phase one - store every dialog's height
$('.modal').each(function () {
var t = $(this),
d = t.find('.modal-dialog'),
fadeClass = (t.is('.fade') ? 'fade' : '');
// render dialog
t.removeClass('fade')
.addClass('invisible')
.css('display', 'block');
// read and store dialog height
d.data('height', d.height());
// hide dialog again
t.css('display', '')
.removeClass('invisible')
.addClass(fadeClass);
});
// phase two - set margin-top on every dialog show
$('.modal').on('show.bs.modal', function () {
var t = $(this),
d = t.find('.modal-dialog'),
dh = d.data('height'),
w = $(window).width(),
h = $(window).height();
// if it is desktop & dialog is lower than viewport
// (set your own values)
if (w > 380 && (dh + 60) < h) {
d.css('margin-top', Math.round(0.96 * (h - dh) / 2));
} else {
d.css('margin-top', '');
}
});
});
没那么复杂。
请试试这个:
$(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();
});
});
