CSS 如何使弹出窗口位于屏幕中央？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19467693/
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 make popup look at the centre of the screen?
提问by Apolo Radomer
When i click a link, a pop up comes out. The thing is that it is not aligned to the centre of the screen. By the way my code also helps the website (and the pop up) to look perfectly in a mobile version.
当我点击一个链接时，会弹出一个窗口。问题是它没有与屏幕中心对齐。顺便说一下，我的代码还帮助网站（和弹出窗口）在移动版本中看起来很完美。
The HTML code :
HTML代码：
<a href="#" data-reveal-id="exampleModal">POP UP</a>
<div id="exampleModal" class="reveal-modal">
<h2>POP UP</h2>
<p>
<font size="4">window window window.window window window. window.
</font>
</p>
<a class="close-reveal-modal">×</a>
</div>
The css code :
css代码：
.reveal-modal
{
background:#e1e1e1;
visibility:hidden;
display:none;
top:100px;
left:50%;
width:820px;
position:absolute;
z-index:41;
padding:30px;
-webkit-box-shadow:0 0 10px rgba(0,0,0,0.4);
-moz-box-shadow:0 0 10px rgba(0,0,0,0.4);
box-shadow:0 0 10px rgba(0,0,0,0.4)
}
I tried putting some right:50% as well but it didn't work. Shouldn't left work ?
我也试过把一些正确的：50%，但它没有用。不应该离开工作吗？
回答by Deryck
These are the changes to make:
这些是要进行的更改：
CSS:
CSS：
#container {
width: 100%;
height: 100%;
top: 0;
position: absolute;
visibility: hidden;
display: none;
background-color: rgba(22,22,22,0.5); /* complimenting your modal colors */
}
#container:target {
visibility: visible;
display: block;
}
.reveal-modal {
position: relative;
margin: 0 auto;
top: 25%;
}
/* Remove the left: 50% */
HTML:
HTML：
<a href="#container">Reveal</a>
<div id="container">
<div id="exampleModal" class="reveal-modal">
........
<a href="#">Close Modal</a>
</div>
</div>
回答by Nancy Hastings-Trew
If the effect you want is to center in the center of the screen no matter where you've scrolled to, it's even simpler than that:
如果您想要的效果是无论您滚动到哪里都以屏幕中心为中心，那么它甚至比这更简单：
In your CSS use (for example)
在您的 CSS 中使用（例如）
div.centered{
width: 100px;
height: 50px;
position:fixed;
top: calc(50% - 25px); // half of width
left: calc(50% - 50px); // half of height
}
No JS required.
不需要JS。
回答by Awadhesh Singh
/*-------- Bootstrap Modal Popup in Center of Screen --------------*/
/*---------------extra 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;
}
/*----- Modal Popup -------*/
<div class="modal fade" role="dialog">
<div class="modal-dialog" >
<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>
<h5 class="modal-title">Header</h5>
</div>
<div class="modal-body">
body here
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
回答by anilam
In order to get the popup exactly centered, it's a simple matter of applying a negative top margin of half the div height, and a negative left margin of half the div width. For this example, like so:
为了使弹出窗口完全居中，只需应用 div 高度一半的负上边距和 div 宽度一半的负左边距。对于这个例子，像这样：
.div {position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50%;
}
