CSS實現不定高度DIV絕對居中

一般來說，指定高度的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 #000;text-align:center;padding:5px;}

XHTML程式碼：

簡單解釋下，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不定高了，不定寬也同理。