DIV+CSS如何讓文字垂直居中

CSS網頁佈局DIV水平居中的各類方法 

1、單行垂直居中 

若是一個容器中只有一行文字，對它實現居中相對比較簡單，咱們只須要設置它的實際高度height和所在行的高度line-height相等便可。如： 

imoker.cn（愛摩客）提供的代碼片斷：

1 div {   
2   height:25px;   
3   line-height:25px;   
4   overflow:hidden;   
5 }

這段代碼很簡單，後面使用overflow:hidden的設置是爲了防止內容超出容器或者產生自動換行，這樣就達不到垂直居中效果了。 
imoker.cn（愛摩客）提供的代碼片斷
不過在Internet Explorer 6及如下版本中，這和方法不支持對圖片設置垂直居中。 

2、多行未知高度文字的垂直居中 
若是一段內容，它的高度是可變的那麼咱們就可使用上一節講到的實現水平居中時使用到的最後一種方法，就是設定Padding，使上下的padding值相同便可。一樣的，這也是一種「看起來」的垂直居中方式，它只不過是使文字把<div>徹底填充的一種方式而已。可使用相似下面的代碼： 
imoker.cn（愛摩客）提供的代碼片斷：

1 div {   
2   padding:25px;   
3 } 

這種方法的優勢就是它能夠在任何瀏覽器上運行，而且代碼很簡單，只不過這種方法應用的前提就是容器的高度必須是可伸縮的。 

3、多行文本固定高度的居中 

 1 div#wrap {   
 2   height:400px;   
 3   display:table;   
 4 }   
 5 div#content {   
 6   vertical-align:middle;   
 7   display:table-cell;   
 8   border:1px solid #FF0099;   
 9   background-color:#FFCCFF;   
10   width:760px;   
11 }

這個方法應該是很理想了，可是不幸的是Internet Explorer 6 並不能正確地理解display:table和display:table-cell，所以這種方法在Internet Explorer 6及如下的版本中是無效的。嗯，這讓人很鬱悶！不過咱們還其它的辦法。

4、在Internet Explorer中的解決方案 
在Internet Explorer 6及如下版本中，在高度的計算上存在着缺陷的。在Internet Explorer 6中對父元素進行定位後，若是再對子元素進行百分比計算時，計算的基礎彷佛是有繼承性的（若是定位的數值是絕對數值沒有這個問題，可是使用百分比計算的基礎將再也不是該元素的高度，而從父元素繼承來的定位高度）。例如，咱們有下面這樣一個(X)HTML代碼段： 

1 <div id="wrap">   
2   <div id="subwrap">   
3     <div id="content">   
4     </div>   
5   </div>   
6 </div>

若是咱們對subwrap進行了絕對定位，那麼content也會繼承了這個屬性，雖然它不會在頁面中立刻顯示出來，可是若是再對content進行相對定位的時候，你使用的100%分比將再也不是content原有的高度。例如，咱們設定了subwrap的position爲40%，咱們若是想使content的上邊緣和wrap重合的話就必須設置top:-80%;那麼，若是咱們設定subwrap的top:50%的話，咱們必須使用100%才能使content回到原來的位置上去，可是若是咱們把content也設置50%呢？那麼它就正好垂直居中了。因此咱們可使用這中方法來實現Internet Explorer 6中的垂直居中： 

imoker.cn（愛摩客）提供的代碼片斷：

 1 div#wrap {   
 2   border:1px solid #FF0099;   
 3      
 4   width:760px;   
 5   height:400px;   
 6   position:relative;   
 7 }   
 8 div#subwrap {   
 9   position:absolute;   
10   border:1px solid #000;   
11   top:50%;   
12 }   
13 div#content {   
14   border:1px solid #000;   
15   position:relative;   
16   top:-50%;   
17 } 

固然，這段代碼只能在Internet Exlporer 6等計算存在問題的瀏覽器中才會有做用。（不過我不解，我查閱了不少文章，不知道是由於出處相同仍是什麼緣由，彷佛不少人都不肯意去解釋Internet Exlporer 6中這個Bug的原理，我也只是瞭解了一點皮毛，還要再研究） 

5、完美的解決方案 
那麼咱們綜合上面兩種方法就能夠獲得一個完美的解決方案，不過這要用到CSS hack的知識。對於若是使用CSS Hack來區分瀏覽器，你能夠參考這篇「簡單CSS hack：區分IE六、IE七、IE八、Firefox、Opera」： 

 1 div#wrap {   
 2   display:table;   
 3   border:1px solid #FF0099;   
 4   background-color:#FFCCFF;   
 5   width:760px;   
 6   height:400px;   
 7   _position:relative;   
 8   overflow:hidden;   
 9 }   
10 div#subwrap {   
11   vertical-align:middle;   
12   display:table-cell;   
13   _position:absolute;   
14   _top:50%;   
15 }   
16 div#content {   
17   _position:relative;   
18   _top:-50%;   
19 }

 至此，一個完美的居中方案就產生了。