Html 如何为居中的浮动确认对话框设计 CSS？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1205457/
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 design a CSS for a centered floating confirm dialog?
提问by Vinzz
I'm looking for a way to display a confirm dialog that's always centered on the page, and floating over the page.
我正在寻找一种方法来显示始终以页面为中心并浮动在页面上的确认对话框。
Tried that, but it's not 'always centered' at all, since the position is fixed:
试过了，但它根本不是“始终居中”，因为位置是固定的：
.Popup
{
text-align:center;
position: absolute;
bottom: 10%;
left: 27%;
z-index:50;
width: 400px;
background-color: #FFF6BD;
border:2px solid black;
}
Any idea? Thanks
任何的想法？谢谢
回答by Cristian Toma
Try using this CSS
尝试使用这个CSS
#centerpoint {
top: 50%;
left: 50%;
position: absolute;
}
#dialog {
position: relative;
width: 600px;
margin-left: -300px;
height: 400px;
margin-top: -200px;
}
<div id="centerpoint">
<div id="dialog"></div>
</div>
#centerpointshould be the container div of the dialog
#centerpoint应该是对话框的容器 div
Notethat the #centerpointDIV should be inside the bodyelement or inside elements that don't have a position: relative;property
请注意，#centerpointDIV 应该位于body元素内或没有position:relative; 的元素内。财产
回答by Steve Robbins
Compared to @Toma's answer, you can do it on one element
与@Toma 的答案相比，您可以在一个元素上进行
#theDiv {
position: fixed;
top: 50%;
left: 50%;
width: 200px;
margin-left: -100px;
height: 50px;
margin-top: -25px;
background: yellow;
}<div id="theDiv" />This allows you to place it anywhere on the page regardless of parent containers and their positionproperties.
这允许您将其放置在页面上的任何位置，而不管父容器及其position属性如何。
回答by zavidovych
CSS3 transform can be used to avoid hardcoded width and margins:
CSS3 变换可用于避免硬编码宽度和边距：
.dialog {
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
Example usage: http://tympanus.net/codrops/2013/06/25/nifty-modal-window-effects/
用法示例：http: //tympanus.net/codrops/2013/06/25/nifty-modal-window-effects/
回答by zavidovych
.Popup
{
width:400px;
margin-left:auto;
margin-right:auto;
}
That's horizontal alignment; vertical alignment is a little trickier. Just Google around for "css vertical center" or something.
那是水平对齐；垂直对齐有点棘手。只需谷歌搜索“css垂直中心”或其他东西。
