Html 如何在页面上居中显示模态窗口？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20944334/
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
How to center a modal window on a page?
提问by Raghu
I am trying center a modal window in the browser page. I just want to center it, so that it should be responsive for all the screens.
我正在尝试在浏览器页面中居中显示一个模态窗口。我只是想让它居中，这样它就应该对所有屏幕都有响应。
回答by Waqar Alamgir
With position:absoluteAssuming your modal is 300x300
使用 position:absolute假设您的模态为 300x300
.modal {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
}
With display:tableAn alternative way for that is to make display table
使用 display:table另一种方法是制作显示表
<div class="modal">
<div class="body">
<div class="content">
Content goes here
</div>
</div>
</div>
<style>
.modal {display:table;}
.body {display:table-cell; vertical-align:middle; text-align:center;}
</style>
回答by Rohan
.modal
{
position: fixed;
left: 50%;
}
回答by Shurvir Mori
Try This in Full Page Preview
在整页预览中试试这个
.modal {
width: 100px;
height: 100px;
margin:0 auto;
display:table;
position: absolute;
left: 0;
right:0;
top: 50%;
border:1px solid;
-webkit-transform:translateY(-50%);
-moz-transform:translateY(-50%);
-ms-transform:translateY(-50%);
-o-transform:translateY(-50%);
transform:translateY(-50%);
}<div class="modal"></div>回答by Super Model
Simple solution using css only: set modal center to screen
仅使用 css 的简单解决方案：将模式中心设置为屏幕
.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;
}
回答by Abdennour TOUMI
If modal container is as following :
如果模态容器如下：
<div id="containerDiv">
<!--HTML modal -->
</div>
Add css code
添加css代码
#containerDiv{
margin : 0 auto;
}
回答by Big Zed
when showing you modal you should put display:flexinstead of blocklike most people usualy do. then :
在向您展示模态时，您应该放置display:flex而不是block像大多数人通常所做的那样。然后 ：
<div class="modal" id="modal">
<div class="modal-content">
What you want !
</div>
</div>
and CSS :
和 CSS ：
.modal {
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
}
remember to put a close button in your modal-contentbecause the other element on the screen won't be usable as the modaldiv covers all the screen size.
请记住在您modal-content的屏幕上放置一个关闭按钮，因为屏幕上的其他元素将无法使用，因为modaldiv 覆盖了所有屏幕尺寸。
回答by Alpha
Tried almost all CSS options, but finally something worked : jQuery
尝试了几乎所有的 CSS 选项，但最终还是奏效了：jQuery
setInterval(function()
{
if($('#myModal').is(':visible')===true)
{
$("body").addClass("modal-open");
$('#myModal').css({"display":"flex"});
}
else
{
$("body").removeClass("modal-open");
$('#myModal').css({"display":"none"});
}
},200);
This is basic bug from Bootstrap regarding the adding/removal of class modal-opento the body tag which is being discussed over the years but no working solution till date.
这是 Bootstrap 关于向body 标签添加/删除类modal-open 的基本错误，多年来一直在讨论，但到目前为止还没有可行的解决方案。
