在工作當中我們經常碰到類似於"固定高度文字垂直居中及未知高度垂直居中問題"，或者 "圖片垂直居中問題"，而我們最容易會想到使用表格來垂直居中，或者如果是單行文字的話使用height(高度)和line-height（行高）來解決，但是假如頁面有多行文字的話 固定高度該怎麼解決? 或者未知高度我們該用css怎麼解決? 且兼容各個游覽器！
一：單行文字垂直居中：
查看效果：http:///keleyi/phtml/divcss/14.htm
如果一個容器中只有一行文字的話，讓他垂直居中比較簡單 直接定義height(高度)和 line-height(行高)相等即可。
如：<div style="height:25px;line-height:25px;overflow:hidden"></div>
二：多行文本固定高度垂直居中：
1. 除IE7及IE7以下游覽器 多行文本固定高度垂直居中的解決方案。
查看效果：http:///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"></div>
</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游覽器的多行文本垂直居中的解決方案！
查看效果：http:///keleyi/phtml/divcss/14b.htm
其實在標准游覽器中 解決的方案如上，現在的問題我們該怎麼解決IE7及以下的版本的問題了，我們可以考慮用定位的方式來解決，在IE6中對父元素進行定位後，如果再對子元素進行百分比計算時，計算的基礎似乎是有繼承性的（如果定位的數值是絕對數值沒有這個問題，但是使用百分比計算的基礎將不再是該元素的高度，而從父元素繼承來的定位高度）。
比如HTML代碼如下：
<div class="wrap">
<div class="subwrap">
<div class="content"></div>
</div>
</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%;
}
三：多行文本 未知高度垂直居中的解決方案：
http:///keleyi/phtml/divcss/14c.htm
其實思路還是上面的一樣 標准游覽器版本下 采用類似於表格的方式來 垂直居中 解決，對於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;}
原文：http://www.cnblogs.com/tugenhua0707/p/3454942.html