如何为居中的浮动确认对话框设计CSS?
题
我正在寻找一种方法来显示一个始终以页面为中心并浮动在页面上的确认对话框。
尝试过,但它根本不是“总是居中”,因为这个位置是固定的:
.Popup
{
text-align:center;
position: absolute;
bottom: 10%;
left: 27%;
z-index:50;
width: 400px;
background-color: #FFF6BD;
border:2px solid black;
}
有什么想法吗? 谢谢
解决方案
尝试使用 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>
#centerpoint 应该是对话框的容器div
注意 #centerpoint DIV应位于 body 元素内或没有职位:相对; 财产
其他提示
与@ Toma的回答相比,你可以在一个元素上做到这一点
#theDiv {
position: fixed;
top: 50%;
left: 50%;
width: 200px;
margin-left: -100px;
height: 50px;
margin-top: -25px;
background: yellow;
}
<div id="theDiv" />
这允许您将其放在页面的任何位置,而不管父容器及其 position
属性。
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%);
}
.Popup
{
width:400px;
margin-left:auto;
margin-right:auto;
}
那是水平对齐;垂直对齐有点棘手。 只是谷歌周围的“css垂直中心”什么的。
不隶属于 StackOverflow