我想将我的模态集中在视口上（中间） 我尝试添加一些 CSS 属性
.modal { position: fixed; top:50%; left:50%; }
我正在使用这个例子http://jsfiddle.net/rniemeyer/Wjjnd/
我试过了
$("#MyModal").modal('show').css(
{
'margin-top': function () {
return -($(this).height() / 2);
},
'margin-left': function () {
return -($(this).width() / 2);
}
})
这可以完成工作：http: //jsfiddle.net/sRmLV/1140/
它使用 helper-div 和一些自定义 css。不需要 javascript 或 jQuery。
HTML（基于 Bootstrap 的演示代码）
<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>
CSS
.vertical-alignment-helper {
display:table;
height: 100%;
width: 100%;
pointer-events:none; /* This makes sure that we can still click outside of the modal to close it */
}
.vertical-align-center {
/* To center vertically */
display: table-cell;
vertical-align: middle;
pointer-events:none;
}
.modal-content {
/* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
width:inherit;
max-width:inherit; /* For Bootstrap 4 - to avoid the modal window stretching full width */
height:inherit;
/* To center horizontally */
margin: 0 auto;
pointer-events: all;
}
因为 gpcola 的答案对我不起作用，所以我进行了一些编辑，所以它现在可以工作了。我使用“margin-top”而不是变换。另外，我使用“show”而不是“shown”事件，因为它给了我一个非常糟糕的定位跳跃（当你打开引导动画时可见）。定位前一定要设置显示为“block”，否则 $dialog.height() 会为 0，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));
这就是我为我的应用程序所做的。如果您查看 bootstrap.css 文件中的以下类 .modal-dialog 的默认填充为 10 像素，@media 屏幕和 (min-width: 768px) .modal-dialog 的顶部填充设置为 30 像素。因此，在我的自定义 css 文件中，我将所有屏幕的顶部填充设置为 15%，而没有指定媒体屏幕宽度。希望这可以帮助。
.modal-dialog {
padding-top: 15%;
}
我为所有 HTML5 浏览器找到的最佳方式：
body.modal-open .modal {
display: flex !important;
height: 100%;
}
body.modal-open .modal .modal-dialog {
margin: auto;
}
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="table">
<div class="table-cell">
<div class="modal-dialog">
<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>
</div>
// 样式
.table {
display: table;
height:100%;
}
.table-cell {
display: table-cell;
vertical-align: middle;
}
从 Bootstrap 4 开始，添加了以下类以在不使用 JavaScript 的情况下为您实现这一目标。
modal-dialog-centered
你可以在这里找到他们的文档。
感谢 vd 指出您需要将 .modal-dialog-centered 添加到 .modal-dialog 以使模态垂直居中。
top 参数在 .modal.fade.in 中被覆盖以强制在您的自定义声明中设置值，!important在 top 之后添加关键字。这会强制浏览器使用该值并忽略关键字的任何其他值。这样做的缺点是您无法在其他任何地方覆盖该值。
.modal {
position: fixed;
top: 50% !important;
left: 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;
}
您可以使用：
.modal {
position: fixed;
top: 50% !important;
left: 50%;
transform: translate(-50%, -50%);
}
使其垂直和水平居中。
因为这里的大部分答案都不起作用，或者只是部分起作用：
body.modal-open .modal[style]:not([style='display: none;']) {
display: flex !important;
height: 100%;
}
body.modal-open .modal[style]:not([style='display: none;']) .modal-dialog {
margin: auto;
}
您必须使用 [style] 选择器仅将样式应用于当前活动的模式而不是所有模式。 .in本来会很棒，但是似乎只有在过渡完成后才添加它，这为时已晚，并且会导致一些非常糟糕的过渡。幸运的是，似乎 bootstrap 总是在模式上应用样式属性，就像它开始显示一样，所以这有点 hacky，但它确实有效。
该:not([style='display: none;'])部分是引导程序未正确删除样式属性并在关闭对话框时将样式显示设置为无的解决方法。
您可以像这样在 Bootstrap 3 modal 上实现垂直对齐中心：
.modal-vertical-centered {
transform: translate(0, 50%) !important;
-ms-transform: translate(0, 50%) !important; /* IE 9 */
-webkit-transform: translate(0, 50%) !important; /* Safari and Chrome */
}
并将这个 css 类添加到“modal-dialog”容器中
<div class="modal-dialog modal-vertical-centered">
...
jsFiddle 工作示例：http: //jsfiddle.net/U4NRx/
最干净和最简单的方法是使用 Flexbox！以下将在屏幕中心垂直对齐 Bootstrap 3 模式，并且比此处发布的所有其他解决方案更清洁和简单：
body.modal-open .modal.in {
display: flex !important;
align-items: center;
}
注意：虽然这是最简单的解决方案，但由于浏览器支持，它可能不适用于所有人：http: //caniuse.com/#feat=flexbox
看起来（通常）IE落后了。就我而言，我为自己或为客户开发的所有产品都是 IE10+。（当它可以用于实际开发产品并更快地获得 MVP 时，投入开发时间来支持旧版本的 IE 是没有商业意义的）。这当然不是每个人都拥有的奢侈品。
我见过较大的网站检测是否支持 flexbox 并将一个类应用到页面的主体——但是这种前端工程级别非常强大，你仍然需要一个后备。
我会鼓励人们拥抱网络的未来。Flexbox 很棒，如果可以的话，你应该开始使用它。
PS - 这个网站真的帮助我掌握了整个 flexbox 并将其应用于任何用例： http: //flexboxfroggy.com/
编辑：如果在一页上有两个模态，这应该适用于 .modal.in
优点：
display:table-cell（这不适用于布局）markupSCSS为那些使用gulp或grunt// closes the modal on click/tap below/above the modal
$('.modal-dialog').on('click tap', function(e){
if (e.target.classList.contains('modal-dialog')) {
$('.modal').modal('hide');
}
}).modal-dialog {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
overflow-y: auto;
min-height: -webkit-calc(100vh - 60px);
min-height: -moz-calc(100vh - 60px);
min-height: calc(100vh - 60px);
}
@media (max-width: 767px) {
.modal-dialog {
min-height: -webkit-calc(100vh - 20px);
min-height: -moz-calc(100vh - 20px);
min-height: calc(100vh - 20px);
}
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</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>注意：我打算让这个答案与 Bootstrap 3 的最新规格保持同步。对于 Bootstrap 4 解决方案，请参阅这个答案（现在它们或多或少相同，但随着时间的推移它们可能会出现分歧）。如果您发现任何错误或问题，请告诉我，我会更新。谢谢。
干净，无前缀SCSS（与gulp/一起使用grunt）：
.modal-dialog {
display: flex;
flex-direction: column;
justify-content: center;
overflow-y: auto;
min-height: calc(100vh - 60px);
@media (max-width: 767px) {
min-height: calc(100vh - 20px);
}
}
又一个 CSS 解决方案。不适用于大于视口的弹出窗口。
.modal-dialog {
position: absolute;
right: 0;
left: 0;
margin-top: 0;
margin-bottom: 0;
}
.modal.fade .modal-dialog {
transition: top 0.4s ease-out;
transform: translate(0, -50%);
top: 0;
}
.modal.in .modal-dialog {
transform: translate(0, -50%);
top: 50%;
}
在.modal-dialog类中将位置覆盖到绝对位置（从相对位置）并将内容居中right:0, left: 0
在.modal.fade .modal-dialog , .modal.in .modal-dialog设置过渡动画top而不是平移。
margin-top在小弹出窗口和长弹出窗口的情况下，将弹出窗口移动到略低于中心的位置，模式与标题卡住。因此margin-top:0, margin-bottom:0
需要进一步细化。
对于那些使用 angular-ui bootstrap 的人，可以根据上述信息添加以下类：
注意：不需要其他更改，它将解决所有模式。
// The 3 below classes have been placed to make the modal vertically centered
.modal-open .modal{
display:table !important;
height: 100%;
width: 100%;
pointer-events:none; /* This makes sure that we can still click outside of the modal to close it */
}
.modal-dialog{
display: table-cell;
vertical-align: middle;
pointer-events: none;
}
.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;
pointer-events: all;
}
不需要我们的javascript。Boostrap modal 出现时会添加 .in 类。只需用 modalclassName.fade.in 和 flex css 修改这个类组合，你就完成了。
添加此 css 以使您的模态垂直和水平居中。
.modal.fade.in {
display: flex !important;
justify-content: center;
align-items: center;
}
.modal.fade.in .modal-dialog {
width: 100%;
}
我的选择，只是一点 CSS：（不适用于 IE8）
.modal.fade .modal-dialog {
transform: translate(-50%, -80%);
}
.modal.in .modal-dialog {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin-top: 0px;
}
您可以使用第一条规则来更改模态的显示方式。
使用：引导 3.3.4
我认为这是一个比 Rens de Nobel 的解决方案更干净的纯 CSS 解决方案。这也不会阻止通过单击对话框外部来关闭对话框。
http://plnkr.co/edit/JCGVZQ?p=preview
只需将一些 CSS 类添加到具有 .modal-dialog 类的 DIV 容器即可获得比引导 CSS 更高的特异性，例如 .centered。
HTML
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog centered modal-lg">
<div class="modal-content">
...
</div>
</div>
</div>
并使这个 .modal-dialog.centered 容器固定并正确定位。
CSS
.modal .modal-dialog.centered {
position: fixed;
bottom: 50%;
right: 50%;
transform: translate(50%, 50%);
}
或者更简单的使用 flexbox。
CSS
.modal {
display: flex;
align-items: center;
justify-content: center;
}
只需将以下 CSS 添加到您现有的 CSS 中，对我来说效果很好
.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;
}
根据Arany 的回答，还要考虑页面滚动。
(function($) {
"use strict";
function positionModals(e) {
var $this = $(this).css('display', 'block'),
$window = $(window),
$dialog = $this.find('.modal-dialog'),
offset = ($window.height() - $window.scrollTop() - $dialog.height()) / 2,
marginBottom = parseInt($dialog.css('margin-bottom'), 10);
$dialog.css('margin-top', offset < marginBottom ? marginBottom : offset);
}
$(document).on('show.bs.modal', '.modal', positionModals);
$(window).on('resize', function(e) {
$('.modal:visible').each(positionModals);
});
}(jQuery));
.modal.in .modal-dialog {
position: relative;
top: 50%;
transform: translateY(-50%);
}这适用于 BS3，未在 v2 中测试。它使模态垂直居中。请注意，它将在那里转换 - 如果您希望它只出现在位置编辑 CSStransition属性中.modal-dialog
centerModal = function() {
var $dialog = $(this).find(".modal-dialog"),
offset = ($(window).height() - $dialog.height()) / 2;
// Center modal vertically in window
$dialog.css({
'transform': 'translateY(' + offset + 'px) !important',
});
};
$('.modal').on('shown.bs.modal', centerModal);
$(window).on("resize", function() {
$('.modal').each(centerModal);
});
为了向 bootstrap modal.js 添加垂直模态居中，我在函数末尾添加了这个Modal.prototype.show：
var $modalDialog = $('.modal-dialog'),
modalHeight = $modalDialog.height(),
browserHeight = window.innerHeight;
$modalDialog.css({'margin-top' : modalHeight >= browserHeight ? 0 : (browserHeight - modalHeight)/2});
如果模式高于屏幕高度，这将采用 Arany 的答案并使其工作：
function centerModal() {
$(this).css('display', 'block');
var $dialog = $(this).find(".modal-dialog");
var offset = ($(window).height() - $dialog.height()) / 2;
//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
var bottomMargin = $dialog.css('marginBottom');
bottomMargin = parseInt(bottomMargin);
if(offset < bottomMargin) offset = bottomMargin;
$dialog.css("margin-top", offset);
}
$('.modal').on('show.bs.modal', centerModal);
$(window).on("resize", function () {
$('.modal:visible').each(centerModal);
});
e(document).on('show.bs.modal', function () {
if($winWidth < $(window).width()){
$('body.modal-open,.navbar-fixed-top,.navbar-fixed-bottom').css('marginRight',$(window).width()-$winWidth)
}
});
e(document).on('hidden.bs.modal', function () {
$('body,.navbar-fixed-top,.navbar-fixed-bottom').css('marginRight',0)
});
使模态垂直对齐所有中间对话框。
/* 笔记：
1.即使你不需要指定选择器，它也会从文档中找到所有模态并使其垂直居中
2.为了避免将某些特定模式居中居中，您可以在点击事件中使用 :not 选择器
*/
$( "[data-toggle='modal']" ).click(function(){
var d_tar = $(this).attr('data-target');
$(d_tar).show();
var modal_he = $(d_tar).find('.modal-dialog .modal-content').height();
var win_height = $(window).height();
var marr = win_height - modal_he;
$('.modal-dialog').css('margin-top',marr/2);
});
从米兰潘迪亚
使用这个使模态居中的简单脚本。
如果您愿意，您可以设置一个自定义类（例如：.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 会自动隐藏正文滚动：
/* scroll fixes */
.modal-open .modal {
padding-left: 0px !important;
padding-right: 0px !important;
overflow-y: scroll;
}
使用宽度和高度集中模态的最佳解决方案是，在 css 中添加和在模态中添加这个“集中”作为一个类..
.centralize{
position:absolute;
left:50%;
top:50%;
background-color:#fff;
transform: translate(-50%, -50%);
width: 40%; //specify watever u want
height: 50%;
}
这个问题的另一个 CSS 答案......
这个解决方案仅使用 CSS 来达到预期的效果，同时仍然保持通过单击外部模式来关闭模式的能力。它还允许您设置.modal-content最大高度和宽度，以便您的弹出窗口不会超出视口。当内容超出模态大小时，将自动出现滚动。
注意：
应该省略
推荐的 Bootstrap.modal-dialog div以使其正常工作（似乎不会破坏任何东西）。在 Chrome 51 和 IE 11 中测试。
CSS 代码：
.modal {
height: 100%;
width: 100%;
}
.modal-content {
margin: 0 auto;
max-height: 600px;
max-width: 50%;
overflow: auto;
transform: translateY(-50%);
}
编辑：
该类.modal-dialog允许您选择用户是否可以通过单击模态本身外部来关闭模态。大多数模式都有一个明确的“关闭”或“取消”按钮。使用此解决方法时请记住这一点。
垂直居中 将 .modal-dialog-centered 添加到 .modal-dialog 以使模态垂直居中
启动演示模式
<!-- 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>
4小时后，我找到了解决方案。以不同的分辨率（台式机、平板电脑、智能手机）居中模态：
索引.php
<! - Bootstrap core CSS ->
<link href=".../css/bootstrap-modal-bs3patch.css" rel="stylesheet">
<link href=".../css/bootstrap-modal.css" rel="stylesheet">
我从https://github.com/jschr/bootstrap-modal下载的文件bootstrap-modal-bs3patch.css
然后我修改了这个文件。CSS如下：
body.modal-open,
. modal-open. navbar-fixed-top,
. modal-open. navbar-fixed-bottom {
margin-right: 0;
}
. {modal
padding: 0;
}
. modal.container {
max-width: none;
}
@ media (min-width: 768px) and (max-width: 992px) {
. {modal-dialog
background-color: black;
position: fixed;
top: 20%! important;
left: 15%! important;
}
}
@ media (min-width: 992px) and (max-width: 1300px) {
. {modal-dialog
background-color: red;
position: fixed;
top: 20%! important;
left: 20%! important;
}
}
@ media (min-width: 1300px) {
. {modal-dialog
background-color: # 6e7ec3;
position: fixed;
top: 40%! important;
left: 35%! important;
}
}
我对不同的分辨率进行了测试，它有效！