css實現固定高度及未知高度文字垂直居中的完美解決方案

    在工做當中咱們常常碰到相似於"固定高度文字垂直居中及未知高度垂直居中問題"，或者 "圖片垂直居中問題"，而咱們最容易會想到使用表格來垂直居中，或者若是是單行文字的話使用height(高度)和line-height（行高）來解決，可是假如頁面有多行文字的話 固定高度該怎麼解決? 或者未知高度咱們該用css怎麼解決? 且兼容各個遊覽器！

一：單行文字垂直居中：

     若是一個容器中只有一行文字的話，讓他垂直居中比較簡單 直接定義height(高度)和 line-height(行高)相等便可。

　　如：<div style="height:25px;line-height:25px;overflow:hidden">aa</div>

二：多行文本固定高度垂直居中：

    1. 除IE7及IE7如下游覽器 多行文本固定高度垂直居中的解決方案。

　　咱們都知道 咱們能夠用表格的方式 實現文本垂直居中，同理 咱們能夠用css來模擬表格的方式垂直居中 vertical-align 屬性只會對擁有valign特性的(X)HTML標籤起做用,好比td等，可是對相似於span等這樣的標籤並不起做用，若是咱們不考慮IE7及如下的話 咱們能夠用display:table 和 display:table-cell來模擬表格垂直居中。前者必須設置在父級元素上，後者必須設置在子元素上。好比 以下HTML代碼：

1 <div class="wrapper">
2     <div class="content">content age</div>
3 </div>

相對應的css代碼以下：

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

就能夠實現除IE7及IE7如下的遊覽器支持文本垂直居中的問題！

     2. 兼容IE6+ 火狐 google遊覽器的多行文本垂直居中的解決方案！

     其實在標準遊覽器中 解決的方案如上，如今的問題咱們該怎麼解決IE7及如下的版本的問題了，咱們能夠考慮用定位的方式來解決，在IE6中對父元素進行定位後，若是再對子元素進行百分比計算時，計算的基礎彷佛是有繼承性的（若是定位的數值是絕對數值沒有這個問題，可是使用百分比計算的基礎將再也不是該元素的高度，而從父元素繼承來的定位高度）。

   好比HTML代碼以下：

1 <div class="wrap">
2     <div class="subwrap">
3         <div class="content">aaaaa</div>
4     </div>
5 </div>

咱們能夠對父級元素絕對定位 top:50%;而後在對子元素定位top:-50%,這樣能夠正好重疊了。css代碼以下：

.wrap{  
    border:1pxsolid#FF0099;  
    background-color:#FFCCFF;  
    width:760px;  
    height:400px;  
    position:relative;  
}  
.subwrap{  
    position:absolute;  
    border:1px solid #000;  
    top:50%;  
}  
.content{  
    border:1pxsolid#000;  
    position:relative;  
    top:-50%;  
} 

因此針對上面的解決方案，咱們能夠稍微優化下 在標準遊覽器下 咱們使用相似於 表格的方式來解決  可是對於像IE7及如下的版本 咱們可使用絕對定位的方式來解決。因此優化下 css代碼以下：

.wrap{  
    display:table;  
    border:1pxsolid#FF0099;  
    background-color:#FFCCFF;  
    width:760px;  
    height:400px;  
    *position:relative;  
    overflow:hidden;  
}  
.subwrap{  
    vertical-align:middle;  
    display:table-cell;  
    *position:absolute;  
    *top:50%;  
}  
.content{  
    *position:relative;  
    *top:-50%;  
}

三：多行文本 未知高度垂直居中的解決方案：

   其實思路仍是上面的同樣 標準遊覽器版本下 採用相似於表格的方式來 垂直居中 解決，對於IE7 6下采用定位的方式來解決。以下代碼

 HTML：

<div class="wrapper">
    <div class="subwrap">
        <div class="content">
            關於 CSS 的未知高度水平垂直居中問題<br />
        </div>
    </div>
</div>

css：

body {padding:0;margin:0;}
.content{border:1px solid red;width:500px;margin:0 auto;font-size:12px;line-height:1.8;}

/*標準遊覽器版本*/
html,body{height:100%;}
.wrapper{text-align:center;width:100%;height:100%;display:table;}
.subwrap{display:table-cell;vertical-align:middle;}

/*IE6*/
*html .wrapper{position:absolute;top:50%;width:100%;text-align:center;display:block;height:auto}
*html .subwrap{position:relative;top:-50%;text-align:center;}

/*IE7 能夠合併 可是爲了更好說明 沒有合併*/
*+html .wrapper{position:absolute;top:50%;width:100%;text-align:center;display:block;height:auto}
*+html .subwrap{position:relative;top:-50%;text-align:center;}