[CSS] – CSS實現不定高度DIV絕對置中

來源：http://www.knowsky.com/442392.html

一般來說，指定高度的DIV垂直和水平置中比較方便，而不定高度的話就稍微麻煩了點，我嘗試了一下，通過2個輔助的DIV實現了絕對置中，相容IE和FF等標準瀏覽器。

CSS代碼：

#wrapper{ height:100%; width:100%; overflow:hidden; position:relative; }
#wrapper[id]{ display:table; }
#mid{ position:absolute; top:50%; left:50%; }
#mid[id]{ display:table-cell; left:0; vertical-align:middle; position:static; }
#box{ position:relative; top:-50%; left:-50%; z-index:9999; width:300px; }
#box[id]{ left:0; margin:0 auto; }
div.boxstyle{ border:2px solid #000000; text-align:center; padding:5px; } 

XHTML代碼：

<div id="wrapper">
<div id="mid">
<div id="box" class="boxstyle">
<p>http://bolm.cn</p>
<p>DIV 絕對置中樣本</p>
</div>
</div>
</div> 

     簡單解釋下，wrapper為外層，mid為中介層，box即為絕對置中的那層。

     在FF等標準瀏覽器中可以通過將wrapper層的示範方式為table，mid層設定為table-cell的顯示方式，這樣就可以使用 vertical-align:middle實現中介層的絕對垂直置中，而IE中則使用了top:50%的方式，以及後面box設定的相對定位-50%來 達到垂直置中。水平置中的方式也不同，FF可以很簡單的設定margin實現，而IE則同樣設定了left互相抵消的方式實現。

     另外類似#box[id]這樣的表達方式只有FF等標準瀏覽器認識，所以可以在這裡設定屬於FF等瀏覽器的樣式。

     由於未設定box的高度，預設就為auto不定高了，不定寬也同理。