如何水平和垂直對齊固定位置的div？

Question

<div id="someid">some text here</div> 

三網融合

#someid{position: fixed; width: 500px; height: 30px;} 

我想定位絕對中心的水平和垂直窗口？

Answer 1

#someid{ 
position: 
fixed; 
width: 500px; 
height: 30px; 
right:50%; 
margin-right:-250px; 
} 

負邊距用於修正瀏覽器在瀏覽器窗口右側將div的右側視爲50％時出現的偏移量。

要垂直居中，您可能希望嘗試與垂直位置相同的操作（這裏沒有保證，因爲我以前沒有這樣做）。

例如：

top:50%; 
margin-top:-15px; 

編輯 一點更透徹的解釋：當#someid置於50％從它被定位在正確的，以便它是其父總寬度的50％遠離父母的右邊界。然而，這並不是從#someid的中心到其父元素的右邊界進行度量，而是從#someid的右邊到其父元素的右邊進行度量。當然，這並不是完全以#someid爲中心，它仍然偏移了一半的寬度。

這就是爲什麼我們使用負邊距來抵消它。負邊距需要是＃someid寬度的一半，以彌補左邊的偏移量，當我們將右邊距它的父元素右邊50％放置它時發生左邊偏移量。

Answer 2

雖然你的位置是fixed你不能相對定位div。您必須通過javascript計算頂部和左側值。您可以通過編寫此水平居中的位置：

width: #SOMEWIDTH#px; 
margin: 0 auto; 

爲了使邊際位置的DIV的寬度屬性必須設置中心。 自動邊距不會影響垂直位置。