Question

我使用绝对内部相对定位来定位confirmBox。由于页面包含大量内容，因此页面的高度非常大。 confirmBox位于页面的中心，但不在屏幕的中心。由于可以通过网页上的多个链接在几个点打开confirmBox，因此需要将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>

Answer 1

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

Answer 2

使用fixed代替absolute，您不能使用absolute在整个页面的中心放置元素。检查这个CSS，我给了顶部|右边|底部|左边 * 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

确认框的位置

2 个答案: