確認框的位置

我使用絕對內部的相對定位來定位確認框。由於頁面包含大量內容，因此頁面的高度非常大。確認框位於頁面的中心，但不在屏幕的中心。由於可以通過網頁上的多個鏈接在多個點打開確認框，因此需要將確認框定位在屏幕中心（而不是頁面中心）。我怎樣才能做到這一點？確認框的位置

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>

來源

2013-01-05 Sumit Gera

嘗試使用「固定」的，而不是絕對 – SAK

請把你的答案回答部分，這樣我就可以投票了！ –

嘗試使用「固定」的，而不是絕對

來源

2013-01-05 08:45:57 SAK

不客氣:) – SAK

使用fixed，而不是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

來源

2013-01-05 09:02:19

確認框的位置

回答

相關問題