twitter-bootstrap 垂直居中 Bootstrap 模态窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18053408/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vertically centering Bootstrap modal window
提问by user2613813
I would like to center my modal on the viewport (middle) I tried to add some css properties
我想将我的模式集中在视口（中间）我试图添加一些 css 属性
.modal { position: fixed; top:50%; left:50%; }
I'm using this example http://jsfiddle.net/rniemeyer/Wjjnd/
我正在使用这个例子http://jsfiddle.net/rniemeyer/Wjjnd/
I tried
我试过
$("#MyModal").modal('show').css(
{
'margin-top': function () {
return -($(this).height() / 2);
},
'margin-left': function () {
return -($(this).width() / 2);
}
})
回答by RNobel
This does the job : http://jsfiddle.net/sRmLV/1140/
这可以完成工作：http: //jsfiddle.net/sRmLV/1140/
It uses a helper-div and some custom css. No javascript or jQuery required.
它使用 helper-div 和一些自定义 css。不需要 javascript 或 jQuery。
HTML(based on Bootstrap's demo-code)
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
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;
}
回答by Arany
Because gpcola's answer didn't work for me, I edited a bit so its works now. I used "margin-top" instead of transform. Also, i use the "show" instead of "shown" event because after it gave me a very bad jump of positioning (visible when you have bootstrap animations on). Be sure to set the display to "block" before positioning, otherwise $dialog.height() will be 0 and the modal will not be centered completely.
因为 gpcola 的回答对我不起作用，所以我进行了一些编辑，现在它可以工作了。我使用了“margin-top”而不是转换。另外，我使用“show”而不是“shown”事件，因为它给了我一个非常糟糕的定位跳跃（当你有引导动画时可见）。一定要在定位前将显示设置为“block”，否则 $dialog.height() 将为 0 并且模态不会完全居中。
(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));
回答by user1279047
This is what I did for my app. If you take a look at the following classes in the bootstrap.css file .modal-dialog has a default padding of 10px and @media screen and (min-width: 768px) .modal-dialog has a top padding set to 30px. So in my custom css file I set my top padding to be 15% for all screens without specifying a media screen width. Hope this helps.
这就是我为我的应用程序所做的。如果您查看 bootstrap.css 文件中的以下类，.modal-dialog 的默认填充为 10px，@media screen 和 (min-width: 768px) .modal-dialog 的顶部填充设置为 30px。因此，在我的自定义 css 文件中，我将所有屏幕的顶部填充设置为 15%，而不指定媒体屏幕宽度。希望这可以帮助。
.modal-dialog {
padding-top: 15%;
}
回答by taha shahid
Best way I found for all HTML5 browsers:
我为所有 HTML5 浏览器找到的最佳方式：
body.modal-open .modal {
display: flex !important;
height: 100%;
}
body.modal-open .modal .modal-dialog {
margin: auto;
}
回答by user3389
<!-- 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>
// Styles
// 样式
.table {
display: table;
height:100%;
}
.table-cell {
display: table-cell;
vertical-align: middle;
}
回答by Alexander Varwijk
The top parameter is being overridden in .modal.fade.in to force the value set in your custom declaration, add the !importantkeyword after top. This forces the browser to use that value and ignore any other values for the keyword. This has the drawback that you can't override the value anywhere else.
top 参数在 .modal.fade.in 中被覆盖以强制在您的自定义声明中设置值，!important在 top 之后添加关键字。这会强制浏览器使用该值并忽略关键字的任何其他值。这有一个缺点，即您无法在其他任何地方覆盖该值。
.modal {
position: fixed;
top: 50% !important;
left: 50%;
}
回答by AmirHossein Manian
this Works for me perfectly:
这对我来说非常有效：
.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;
}
complete DemoURL : https://codepen.io/dimbslmh/full/mKfCc
完整的演示网址：https: //codepen.io/dimbslmh/full/mKfCc
回答by jcaruso
As of Bootstrap 4 the following class was added to achieve this for you without JavaScript.
从 Bootstrap 4 开始，添加了以下类来在没有 JavaScript 的情况下为您实现这一点。
modal-dialog-centered
You can find their documentation here.
您可以在此处找到他们的文档。
Thanks v.d for pointing out you need to add both .modal-dialog-centered to .modal-dialog to vertically center the modal.
感谢 vd 指出您需要将 .modal-dialog-central 都添加到 .modal-dialog 以垂直居中模态。
回答by Aryeh Armon
you can use:
您可以使用：
.modal {
position: fixed;
top: 50% !important;
left: 50%;
transform: translate(-50%, -50%);
}
to center it both vertically and horizontally.
使其垂直和水平居中。
回答by Robert McKee
Because most of the answer here didn't work, or only partially worked:
因为这里的大部分答案都不起作用，或者只是部分起作用：
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;
}
You have to use the [style] selector to only apply the style on the modal that is currently active instead of all the modals. .inwould have been great, but it appears to be added only after the transition is complete which is too late and makes for some really bad transitions. Fortunately it appears bootstrap always applies a style attribute on the modal just as it is starting to show so this is a bit hacky, but it works.
您必须使用 [style] 选择器仅将样式应用于当前活动的模态而不是所有模态。 .in本来很好，但它似乎是在过渡完成后才添加的，这为时已晚，并且会导致一些非常糟糕的过渡。幸运的是，当它开始显示时，bootstrap 总是在模态上应用一个样式属性，所以这有点hacky，但它有效。
The :not([style='display: none;'])portion is a workaround to bootstrap not correctly removing the style attribute and instead setting the style display to none when you close the dialog.
该:not([style='display: none;'])部分是一种解决方法，用于引导程序未正确删除样式属性，而是在关闭对话框时将样式显示设置为无。
