div垂直居中的幾種方法

現在我們要讓這段文字垂直居中顯示！
 div {
 padding:25px;
 border:1px solid #FF0099;
 background-color:#FFCCFF;
 }
 

div#wrap {  
height:400px;  
display:table;  
}  
div#content {  
vertical-align:middle;  
display:table-cell;  
border:1px solid #FF0099;  
background-color:#FFCCFF;  
width:760px;  
}

現在我們要讓這段文字垂直居中顯示！ Webjx.Com
 div#wrap {
 height:400px;
 display:table;
 }
 div#content {
 vertical-align:middle;
 display:table-cell;
 border:1px solid #FF0099;
 background-color:#FFCCFF;
 width:760px;
 }
 

Internet Explorer 6及以下的版本中是無效的。嗯，這讓人很鬱悶！不過我們還其它的方法四、在Internet Explorer中的解決方案

在Internet Explorer 6及以下版本中，在高度的計算上存在著缺陷的。在Internet Explorer 6中對父元素進行定位後，如果再對子元素

進行百分比計算時，計算的基礎似乎是有繼承性的（如果定位的數值是絕對數值沒有這個問題，但是使用百分比計算的基礎將不再是該元素的

高度，而從父元素繼承來的定位高度）。例如，我們有下面這樣一個(X)HTML程式碼段：

行相對定位的時候，你使用的100%分比將不再是content原有的高度。例如，我們設定了subwrap的position為40%，我們如果想要使content的上

邊緣和wrap重合的話就必須設定top:-80%;那麼，如果我們設定subwrap的top:50%的話，我們必須使用100%才能讓content回到原來的位置上去

，但如果我們把content也設定50%呢？那麼它就正好垂直居中了。所以我們可以使用這中方法來實作Internet Explorer 6中的垂直居中：

div#wrap {  
border:1px solid #FF0099;  
background-color:#FFCCFF;  
width:760px;  
height:400px;  
position:relative;  
}  
div#subwrap {  
position:absolute;  
border:1px solid #000;  
top:50%;  
}  
div#content {  
border:1px solid #000;  
position:relative;  
top:-50%;  
}  
當然，這段程式碼只能在Internet Exlporer 6等計算有問題的瀏覽器中才會有作用。 （不過我不解，我查了很多文章，不知道是因為出

處相同還是什麼原因，似乎很多人都不願意去解釋Internet Exlporer 6中這這個Bug的原理，我也只是了解了一點皮毛，還要再研究）

現在我們要讓這段文字垂直居中顯示！
 div#wrap {
 border:1px solid #FF0099;
 background-color:#FFCCFF;
 width:760px;
 height:500px;
 position:relative;
 }
 div#subwrap {
 position:absolute;
 border:1px solid #000;
 top:50%;
 }
 div#content {
 border:1px solid #000;
 position:relative;
 top:-50%;
 }

那我們綜合上面兩種方法就可以得到一個完美的解決方案，不過這要用到CSS hack的知識。對於如果使用CSS Hack來區分瀏覽器，你可

參考這篇「簡單CSS hack：區分IE6、IE7、IE8、Firefox、Opera」：

div#wrap {  
display:table;  
border:1px solid #FF0099;  
background-color:#FFCCFF;  
width:760px;  
height:400px;  
_position:relative;  
overflow:hidden;  
}  
div#subwrap {  
vertical-align:middle;  
display:table-cell;  
_position:absolute;  
_top:50%;  
}  
div#content {  
_position:relative;  
_top:-50%;  
}  
至此，一個完美的居中方案就產生了。

現在我們要讓這段文字垂直居中顯示！
 div#wrap {
 border:1px solid #FF0099;
 background-color:#FFCCFF;
 width:760px;
 height:500px;
 position:relative;
 }
 div#subwrap {
 position:absolute;
 border:1px solid #000;
 top:50%;
 }
 div#content {
 border:1px solid #000;
 position:relative;
 top:-50%;
 }