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

     
          
     
  
      
   
       
   
        
         现在我们要使这段文字垂直居中显示！