用CSS實現層的垂直置中

在《曾經讓人迷糊的WEB相容問題回顧》一文中曾經提到一種方法，即“通過使用百分比絕對位置,與外補丁負值的方法，負值的大小為其自身寬度高度的一半”達到讓層垂直置中的效果。

1 div.innerbox {
2     position:absolute;
3     top:50%;
4     left:50%;
5     margin:-100px 0 0 -100px;
6     width:200px;
7     height:200px;
8     border:1px solid red
9 }

這段CSS實現了層垂直置中於瀏覽器，如果要讓innerBox相對於一個父級層實現垂直置中，只需設定父級層的CSS為：

1 div.outbox {
2     width:400px;
3     height:400px;
4     border:1px solid #f00;
5     position:relative
6 }

然而“負值的大小為其自身寬度高度的一半”這個原理卻制約了其實際應用面。innerBox的margin與width、height之間的制約關係，使得動態變化innerBox的內容引起的高度變化沒辦法反應到margin上，除非使用JS動態控制，拋開JS不說，這種原理實現的垂直置中只能用於innerBox的高寬屬性為固定值的情況。如果要實現innerBox的內容動態變化也能保持垂直置中，則要用下面的方法：

1 .outBox2 {display: table; height: 400px; width:600px;  #position: relative; overflow: hidden;background:#FFCCCC; border: 1px solid #d00;}
2 .midBox2 {#position: absolute; #top: 50%;display: table-cell; vertical-align: middle;}
3 .innBox2 {#position: relative; #top: -50%; width:300px; margin:0 auto}

相應的Html結構如下：

 1 <div class="outBox2">
 2     <div class="midBox2">
 3         <div class="innBox2" style="border:1px solid #c00">
 4         垂直置中<br>
 5         匪夷所思的垂直置中<br>
 6         我的部落格我做主的置中
 7         匪夷所思的垂直置中<br>
 8         我的部落格我做主的置中
 9     </div>
10 </div>

就目前我使用的情況來看，兩種方法都不錯，各有用途。兩種方法都相容IE6/IE7/IE8 Beta、Firefox3、Opera9。

好累，雖說是豆腐乾文章，但也要花心思在編輯器排版上，還要測試代碼正確性，哎，寫技術文章真是個體力活。