2

我使用绝对内部相对定位来定位确认框。由于页面包含很多内容，因此页面的高度非常大。ConfirmBox 位于页面中心，但不在屏幕中心。由于可以通过网页上的多个链接在多个点打开确认框，因此需要将确认框定位在屏幕中心（而不是页面中心）。我怎样才能做到这一点？

CSS

#confirmBox {
background:#fff;
border:1px solid #80686f;
border-radius:5px;
-webkit-box-shadow: 0 8px 6px -6px #766A65;
 -moz-box-shadow:0 8px 6px -6px #766A65;
box-shadow: 0 8px 6px -6px #766A65;
font-size:15px;
height:217px;
position:absolute;
text-align:center;
z-index:109;
width:400px;
top:50%;
left:50%;
margin-top:-108px;
margin-left:-200px;
}

HTML

<div style="position:relative">
<div id="confirmBox">
</div>
</div>
4

2 回答 2

2

尝试使用“固定”而不是绝对

于 2013-01-05T08:45:57.220 回答
1

使用fixed而不是absolute，您不能使用绝对将元素放置在整个页面的中心。检查这个 CSS，我给了top|right|bottom|left * 0px * 它将使盒子在水平和垂直的中心。

#confirmBox {
border:1px solid #80686f;
height:217px;
position:fixed;
text-align:center;
z-index:109;
width:400px;
margin:auto;
left:0px;
right:0px;
bottom:0px;
top:0px;
}

小提琴：JsFiddle 不工作，检查 JsBin 示例（输出）http://jsbin.com/uxafal/1/ 。查看代码http://jsbin.com/uxafal/1/edit

于 2013-01-05T09:02:19.103 回答