CSS Bootstrap 3 模态垂直位置中心
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18422223/
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
Bootstrap 3 modal vertical position center
提问by scooterlord
This is a two part question:
这是一个两部分的问题：
How can you position the modal vertically in the center when you don't know the exact height of the modal?
Is it possible to have the modal centered and have overflow:auto in the modal-body, but only if the modal exceeds the screen height?
当您不知道模态的确切高度时，如何将模态垂直放置在中心？
是否可以将模态居中并在模态主体中设置溢出：自动，但前提是模态超过屏幕高度？
I have tried using this:
我试过用这个：
.modal-dialog {
height: 80% !important;
padding-top:10%;
}
.modal-content {
height: 100% !important;
overflow:visible;
}
.modal-body {
height: 80%;
overflow: auto;
}
This gives me the result I need when the content is much larger than vertical screen size, but for small modal contents it's pretty much unusable.
当内容远大于垂直屏幕尺寸时，这给了我所需的结果，但对于小的模态内容，它几乎无法使用。
采纳答案by scooterlord
I came up with a pure css solution! It's css3 though, which means ie8 or lower is not supported, but other than this it's tested and working on ios, android, ie9+, chrome, firefox, desktop safari..
我想出了一个纯 css 解决方案！虽然它是 css3，这意味着不支持 ie8 或更低版本，但除此之外，它已在 ios、android、ie9+、chrome、firefox、桌面 safari 上进行了测试和工作。
I am using the following css:
我正在使用以下 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;
}
Here is a fiddle. http://codepen.io/anon/pen/Hiskj
这是一个小提琴。 http://codepen.io/anon/pen/Hiskj
..selecting this as the correct answer since there's no extra heavy javascript that brings the browser to its knees in case of more than one modals.
..选择它作为正确答案，因为没有额外的繁重 javascript 使浏览器在多个模态的情况下陷入困境。
回答by Finik
.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;
}
And adjust a little bit .fade class to make sure it appears out of the top border of window, instead of center
并稍微调整一下 .fade 类以确保它出现在窗口的顶部边框之外，而不是居中
回答by dimbslmh
1. How can you position the modal vertically in the center when you don't know the exact height of the modal?
1.当你不知道模态的确切高度时，如何将模态垂直放置在中心？
To absolute center the Bootstrap 3 Modal without declaring a height, you will first need to overwrite the Bootstrap CSS by adding this to your style sheet:
要在不声明高度的情况下绝对居中 Bootstrap 3 Modal，您首先需要通过将其添加到样式表来覆盖 Bootstrap CSS：
.modal-dialog-center { /* Edited classname 10/03/2014 */
margin: 0;
position: absolute;
top: 50%;
left: 50%;
}
This will position the modal-dialogs top-left corner in the center of the window.
We have to add this media query or else the modal margin-left is wrong on small devices:
@media (max-width: 767px) {
.modal-dialog-center { /* Edited classname 10/03/2014 */
width: 100%;
}
}
Now we will need to adjust its position with JavaScript. To do that we give the element a negative top and left margin equal to half of its height and width. In this example we will be using jQuery since it is available with 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);
}
});
});
.modal-dialog-center { /* Edited classname 10/03/2014 */
margin: 0;
position: absolute;
top: 50%;
left: 50%;
}
这会将模态对话框的左上角定位在窗口的中心。
我们必须添加这个媒体查询，否则小设备上的模式 margin-left 是错误的：
@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);
}
});
});
Update (01/10/2015):
更新 (01/10/2015)：
Adding on Finik's answer. Credits to 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;
}
Notice the negative margin-right? This removes the space added by inline-block. That space causes the modal to jump to the bottom of the page @media width < 768px.
注意到负边距了吧？这将删除由 inline-block 添加的空间。该空间导致模态跳转到页面底部@media width < 768px。
2. Is it possible to have the modal centered and have overflow:auto in the modal-body, but only if the modal exceeds the screen height?
2. 是否可以将模态居中并在模态体中设置溢出：自动，但前提是模态超过屏幕高度？
This is possible by giving the modal-body an overflow-y:auto and a max-height. This takes a bit more work to get it working properly. Start with adding this to your style sheet:
这可以通过给 modal-body 一个 overflow-y:auto 和一个 max-height 来实现。这需要更多的工作才能使其正常工作。首先将其添加到您的样式表中：
.modal-body {
overflow-y: auto;
}
.modal-footer {
margin-top: 0;
}
We will use jQuery again to get the window height and set the max-height of the modal-content first. Then we have to set the max-height of the modal-body, by subtracting the modal-content with the modal-header and modal-footer:
$('.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);
}
});
});
.modal-body {
overflow-y: auto;
}
.modal-footer {
margin-top: 0;
}
我们将再次使用 jQuery 来获取窗口高度并首先设置模态内容的最大高度。然后我们必须通过使用 modal-header 和 modal-footer 减去 modal-content 来设置 modal-body 的最大高度：
$('.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);
}
});
});
You can find a working demo here with Bootstrap 3.0.3: http://cdpn.io/GwvrJEDIT: I recommend using the updated version instead for a more responsive solution: http://cdpn.io/mKfCc
您可以在此处使用 Bootstrap 3.0.3 找到一个工作演示：http: //cdpn.io/GwvrJ编辑：我建议使用更新版本来获得响应更快的解决方案：http: //cdpn.io/mKfCc
Update (30/11/2015):
更新 (30/11/2015)：
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'));
}
});
(Updated 30/11/2015 http://cdpn.io/mKfCcwith above edit)
（更新 30/11/2015 http://cdpn.io/mKfCc以上编辑）
回答by Brian J. Hakim
My solution
我的解决方案
.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>
回答by Mo.
It can simply can be fixed with display: flex
它可以简单地修复 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);
}
With prefix
带前缀
.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);
}
回答by xiaolin
If you're okay with using flexbox then this should help solve it.
如果您可以使用 flexbox，那么这应该有助于解决它。
.modal-dialog {
height: 100%;
width: 100%;
display: flex;
align-items: center;
}
.modal-content {
margin: 0 auto;
}
回答by Vadim
My solution:
我的解决方案：
.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%);
}
回答by Nerdroid
All what I did in my case is to set the Top in my css knowing the height of the modal
我在我的例子中所做的就是在我的 css 中设置 Top 知道模态的高度
<div id="myModal" class="modal fade"> ... </div>
<div id="myModal" class="modal fade"> ... </div>
in my css i set
在我的 css 中我设置
#myModal{
height: 400px;
top: calc(50% - 200px) !important;
}
回答by Ninja420
Adding this simple css also works.
添加这个简单的 css 也有效。
.modal-dialog {
height: 100vh !important;
display: flex;
}
.modal-content {
margin: auto !important;
height: fit-content !important;
}
回答by Dario Ferrer
There is an easiest way to do this using css:
使用 css 有一个最简单的方法来做到这一点：
.modal-dialog {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width:500px;
height:300px;
}
That's it. Notice that it is only needed to be applied to the .modal-dialogcontainer div.
就是这样。请注意，它只需要应用于.modal-dialog容器 div。
