面試幾次下來，問的最多的問題就是水平居中問題，現在總結一下css的水平居中問題：vertical-align，在div中設置文本垂直居中，是不起作用的。那怎么樣設置div的文本垂直居中？
1、單行文本垂直居中：
方法：把文本段落高度(line-height)和所在區域層的高度(height)設為一致即可。
缺點：這種方法只對單行文本有效。
這段代碼很簡，后面使用overflow:hidden的設置是為了防止內容超出容器或者產生自動換行，這樣就達不到垂直居中效果了。更多CSS教
程。
代碼：
div {
height:25px;
line-height:25px;
overflow:hidden;
}
2、多行文本垂直居中：
方法: 不設區域高度(讓高度自適應), 然后在區域上下位置使用相同的填充控制，即使用padding屬性。
缺點：對固定高度的區間無效。
如果一段內容，它的高度是可變的那么我們就可以使用就是設定Padding，使上下的padding值相同即可。同樣的，這也是一種“看起來”的垂直居中方式，它只不過是使文字把<div>完全填充的一種訪求而已。
代碼：
div {
padding:25px;
}
3、瀏覽器居中：
方法: 設置position屬性為絕對(absolute), 然后把在上方留下瀏覽器高度一半減去文本區域高度一半的距離，例如文本區域高度為瀏覽器高度的20%，那么上方應該留下50%-10%=40%；同理，在左邊留下瀏覽器寬度一半減去文本區域寬度一半的距離。
缺點：這種方法只是讓文本在落在瀏覽器中央，而並非在某個特定區域的中間。
代碼：
<div style="position:absolute; top:40%; left:40%; width:20%; height:20%">
...............................................................................
</div>
4、多行文本固定高度的居中（考慮了瀏覽器兼容問題）。具體細節：http://www.cnblogs.com/dearxinli/p/3865099.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> 多行文字實現垂直居中 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body { font-size:12px;font-family:tahoma;}
div#outer {
display:table;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:400px;
_position:relative;
overflow:hidden;
}
div#middle {
vertical-align:middle;
display:table-cell;
_position:absolute;
_top:50%;
}
div#inner {
_position:relative;
_top:-50%;
}
</style>
</head>
<body>
<div id="outer">
<div id="middle">
<div id="inner">
<center>現在我們要使這段文字垂直居中顯示！
</center>
</div>
</div>
</div>
</body>
</html>