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

龍恩0707發表於2013-12-03
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;}

 

相關文章