面试几次下来，问的最多的问题就是水平居中问题，现在总结一下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%; 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;
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>