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

在工做當中咱們常常碰到相似於"固定高度文字垂直居中及未知高度垂直居中問題"，或者 "圖片垂直居中問題"，而咱們最容易會想到使用表格來垂直居中，或者若是是單行文字的話使用height(高度)和line-height（行高）來解決，可是假如頁面有多行文字的話 固定高度該怎麼解決? 或者未知高度咱們該用css怎麼解決? 且兼容各個遊覽器！
一：單行文字垂直居中：
查看效果：http://keleyi.com/keleyi/phtml/divcss/14.htm
若是一個容器中只有一行文字的話，讓他垂直居中比較簡單 直接定義height(高度)和 line-height(行高)相等便可。

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


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

1. 除IE7及IE7如下游覽器 多行文本固定高度垂直居中的解決方案。
查看效果：http://keleyi.com/keleyi/phtml/divcss/14a.htm
　　咱們都知道 咱們能夠用表格的方式 實現文本垂直居中，同理 咱們能夠用css來模擬表格的方式垂直居中 vertical-align 屬性只會對擁有valign特性的(X)HTML標籤起做用,好比td等，可是對相似於span等這樣的標籤並不起做用，若是咱們不考慮IE7及如下的話 咱們能夠用display:table 和 display:table-cell來模擬表格垂直居中。前者必須設置在父級元素上，後者必須設置在子元素上。好比 以下HTML代碼：

<div class="wrapper">
<div class="content">keleyi.com</div>
</div>

相對應的css代碼以下：

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

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

2. 兼容IE6+ 火狐 google遊覽器的多行文本垂直居中的解決方案！
查看效果：http://keleyi.com/keleyi/phtml/divcss/14b.htm
其實在標準遊覽器中 解決的方案如上，如今的問題咱們該怎麼解決IE7及如下的版本的問題了，咱們能夠考慮用定位的方式來解決，在IE6中對父元素進行定位後，若是再對子元素進行百分比計算時，計算的基礎彷佛是有繼承性的（若是定位的數值是絕對數值沒有這個問題，可是使用百分比計算的基礎將再也不是該元素的高度，而從父元素繼承來的定位高度）。

好比HTML代碼以下：

<div class="wrap">
<div class="subwrap">
<div class="content">keleyi.com</div>
</div>
</div>
咱們能夠對父級元素絕對定位 top:50%;而後在對子元素定位top:-50%,這樣能夠正好重疊了。css代碼以下：
.wrap{ 
border:1pxsolid#FF0099; 
 
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; 
 
width:760px; 
height:400px; 
*position:relative; 
overflow:hidden; 
} 
.subwrap{ 
vertical-align:middle; 
display:table-cell; 
*position:absolute; 
*top:50%; 
} 
.content{ 
*position:relative; 
*top:-50%; 
}

三：多行文本 未知高度垂直居中的解決方案：
http://keleyi.com/keleyi/phtml/divcss/14c.htm
其實思路仍是上面的同樣 標準遊覽器版本下 採用相似於表格的方式來 垂直居中 解決，對於IE7 6下采用定位的方式來解決。以下代碼

HTML：

<div class="wrapper">
<div class="subwrap">
<div class="content">
關於 CSS 的未知高度水平垂直居中問題 keleyi.com<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;}

 

原文：http://www.cnblogs.com/tugenhua0707/p/3454942.html