这是一个两部分的问题：
如果不知道模态框的确切高度，如何将模态框垂直定位在中心？
是否可以让模态框居中并在模态框体中有溢出：自动，但前提是模态框超出屏幕高度？
我试过用这个：
.modal-dialog {
height: 80% !important;
padding-top:10%;
}
.modal-content {
height: 100% !important;
overflow:visible;
}
.modal-body {
height: 80%;
overflow: auto;
}
当内容远大于垂直屏幕尺寸时，这给了我所需的结果，但对于小的模态内容，它几乎无法使用。
【问题讨论】：
标签： css twitter-bootstrap modal-dialog center
.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 类以确保它出现在窗口的顶部边框之外，而不是中心
【讨论】：
1.不知道 modal 的准确高度时，如何将 modal 垂直定位在中心？
要在不声明高度的情况下使 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%;
}
}
现在我们需要用 JavaScript 调整它的位置。为此，我们给元素一个负的上边距和左边距，等于其高度和宽度的一半。在这个例子中，我们将使用 jQuery，因为它可以在 Bootstrap 中使用。
$('.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);
}
});
});
添加Finik's answer。感谢Centering in the Unknown。
.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;
}
注意负边距对吗？这将删除内联块添加的空间。该空间导致模态框跳转到页面底部@media width
2。是否可以使模态居中并在模态主体中具有溢出：自动，但前提是模态超出屏幕高度？
这可以通过给 modal-body 一个 overflow-y:auto 和一个 max-height 来实现。这需要更多的工作才能使其正常工作。首先将其添加到您的样式表中：
.modal-body {
overflow-y: auto;
}
.modal-footer {
margin-top: 0;
}
我们将再次使用 jQuery 来获取窗口高度并首先设置 modal-content 的最大高度。然后我们必须设置 modal-body 的最大高度，方法是用 modal-header 和 modal-footer 减去 modal-content：
$('.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 编辑：我建议使用更新版本来获得响应更快的解决方案：http://cdpn.io/mKfCc
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%} 覆盖了模式上方和下方的整个列，并禁止用户单击该区域的背景。
我想出了一个纯 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.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 中设置 Top 以了解模态的高度
<div id="myModal" class="modal fade"> ... </div>
在我的 css 中设置
#myModal{
height: 400px;
top: calc(50% - 200px) !important;
}
【讨论】：
添加这个简单的 css 也可以。
.modal-dialog {
height: 100vh !important;
display: flex;
}
.modal-content {
margin: auto !important;
height: fit-content !important;
}
【讨论】：
使用 css 有一个最简单的方法：
.modal-dialog {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width:500px;
height:300px;
}
就是这样。请注意，它只需要应用于.modal-dialog 容器div。
【讨论】：
扩展 @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;
}
【讨论】：
我写的最通用的解决方案。动态计算对话高度。 （下一步可能是在调整窗口大小时重新计算对话框的高度。）
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', '');
}
});
});
【讨论】：
从here找到完美解决方案
$(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);
});
});
【讨论】：
这是相当古老的，专门要求使用 Bootstrap 3 的解决方案，但对于任何想知道的人：从 Bootstrap 4 开始，有一个名为 .modal-dialog-centered 的内置解决方案。这是问题所在：https://github.com/twbs/bootstrap/issues/23638
因此，使用 v4 时，您只需将 .modal-dialog-centered 添加到 .modal-dialog 即可使模态垂直居中：
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
【讨论】：
$('#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
}
});
【讨论】：
@$modal = $('.fade.in'); modalBox = @$modal.find('.modal-content'); initModalHeight = modalBox.outerHeight(); userScreenHeight = @$modal.outerHeight()
这是另一种仅使用 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;
}
}
【讨论】：
transform 解决方案一样，当模式具有可滚动内容（内容多于窗口中的内容）时，就会出现问题
这对我有用：
.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;
}
【讨论】：
我已经从下面的链接下载了 bootstrap3-dialog 并修改了 bootstrap-dialog.js 中的 open 函数
https://github.com/nakupanda/bootstrap3-dialog
代码
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;
}
【讨论】：
试试这样的：
.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
}
【讨论】：
您可能想查看这个绝对居中 div 的方法集合：http://codepen.io/shshaw/full/gEiDt
【讨论】：
一个简单的方法。为我工作。谢谢rensdenobel :) http://jsfiddle.net/rensdenobel/sRmLV/13/
<style>
.vertical-alignment-helper {
display:table;
height: 100%;
width: 100%;
}
.vertical-align-center {
/* To center vertically */
display: table-cell;
vertical-align: middle;
}
.modal-content {
/* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
width:inherit;
height:inherit;
/* To center horizontally */
margin: 0 auto;
}
</style>
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="vertical-alignment-helper">
<div class="modal-dialog vertical-align-center">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">...</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
【讨论】：
另一种解决方案，它将在window.resize 事件和show.bs.modal 上为每个可见模式设置一个有效位置：
(function ($) {
"use strict";
function centerModal() {
$(this).css('display', 'block');
var $dialog = $(this).find(".modal-dialog"),
offset = ($(window).height() - $dialog.height()) / 2,
bottomMargin = parseInt($dialog.css('marginBottom'), 10);
// Make sure you don't hide the top part of the modal w/ a negative margin if it's longer than the screen height, and keep the margin equal to the bottom margin of the modal
if(offset < bottomMargin) offset = bottomMargin;
$dialog.css("margin-top", offset);
}
$(document).on('show.bs.modal', '.modal', centerModal);
$(window).on("resize", function () {
$('.modal:visible').each(centerModal);
});
})(jQuery);
【讨论】：
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);
【讨论】：
我知道这有点晚了，但我正在添加一个新答案，以免它迷失在人群中。这是一个跨桌面-移动-浏览器的解决方案，可以在任何地方正常工作。
它只需要将modal-dialog 包装在modal-dialog-wrap 类中，并且需要添加以下代码：
.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;
}
对话框从中心开始，如果内容很大，它会垂直增长，直到出现滚动条。
这是一个让您高兴的工作小提琴！
【讨论】：
.modal {
}
.vertical-alignment-helper {
display:table;
height: 100%;
width: 100%;
}
.vertical-align-center {
/* To center vertically */
display: table-cell;
vertical-align: middle;
}
.modal-content {
/* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
width:inherit;
height:inherit;
/* To center horizontally */
margin: 0 auto;
}<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="vertical-alignment-helper">
<div class="modal-dialog vertical-align-center">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">...</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</body>CSS：
.modal {
}
.vertical-alignment-helper {
display:table;
height: 100%;
width: 100%;
}
.vertical-align-center {
/* To center vertically */
display: table-cell;
vertical-align: middle;
}
.modal-content {
/* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
width:inherit;
height:inherit;
/* To center horizontally */
margin: 0 auto;
}
HTML：
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="vertical-alignment-helper">
<div class="modal-dialog vertical-align-center">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">...</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
【讨论】：
考虑使用此处的引导模式插件 - https://github.com/jschr/bootstrap-modal
该插件将使您的所有模式居中
【讨论】：
对于居中，我不明白过于复杂的解决方案是什么。 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 事件，而使用 shown.ba.modal 事件会导致高度计算不正确。如果您需要它具有响应性，您当然可以为正在调整大小的窗口添加一个事件。
【讨论】：
实现这一概念的非常简单的方法，您将始终通过 css 在屏幕的模式中获得模态：http://jsfiddle.net/jy0zc2jc/1/
您必须通过以下 css 将 modal 类显示为表格：
display:table
和modal-dialog 作为display:table-cell
在给定的小提琴中查看完整的工作示例
【讨论】：
没那么复杂。
请试试这个：
$(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();
});
});
【讨论】：
使用这个使模态框居中的简单脚本。
如果您愿意，您可以设置一个自定义类（例如：.modal.modal-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 修复；我们在 modals 上显示滚动，Bootstrap 会自动隐藏 body 滚动：
/* scroll fixes */
.modal-open .modal {
padding-left: 0px !important;
padding-right: 0px !important;
overflow-y: scroll;
}
【讨论】：