[转] CSS div文本垂直居中 --- 转自: http://blog.163.com/zhaoyanping_1125/blog/static/20132915320120574238932/_html/css_WEB-ITnose

问题：vertical-align，在div中设置文本垂直居中，是不起作用的。那怎么样设置div的文本垂直居中哦！
关于"CSS文本垂直居中"的文章在网上可以找到很多，它们主要涉及3种方法：

1、单行文本垂直居中：
方法：把文本段落高度(line-height)和所在区域高度(height)设为一致即可。
缺点：这种方法只对单行文本有效。

代码：

网站开发日志

2、多行文本垂直居中：
方法: 不设区域高度(让高度自适应), 然后在区域上下位置使用相同的填充控制，即使用padding属性。
缺点：对固定高度的区间无效。

代码：

本博客用于记录网站开发的点点滴滴。包括网站设计，编程指南，资源和灵感。
本站的文章大都是原创或者翻译作品。

3、浏览器居中：

方法: 设置position属性为绝对(absolute), 然后把在上方留下浏览器高度一半减去文本区域高度一半的距离，例如文本区域高度为浏览器高度的20%，那么上方应该留下50%-10%=40%；同理，在左边留下浏览器宽度一半减去文本区域宽度一半的距离。
缺点：这种方法只是让文本在落在浏览器中央，而并非在某个特定区域的中间。

代码：

本博客用于记录网站开发的点点滴滴。包括网站设计，编程指南，资源和灵感。
本站的文章大都是原创或者翻译作品。我并不反对转载，因为互联网本来就是用来共享资源的。
但是当你引用我的文章时，请注明出处。谢谢！

 

4、由于上面的三种方法都存在缺点，因此它们往往不是你所想要的方案。在实际运用中，你可能需要在让多行文本在一个特定高度的区域内垂直居中。当以上三种方法都行不通的情况下，请试试下面要介绍的CSS文本居中的最终方案！其实最终方案并不复杂，有点麻烦的是浏览器的兼容性问题。因此，我们必须创建2套CSS样式方案：

.outer {
  display:table; width:578px; overflow:hidden;
  background: #eee; height: 42px;
}
.middle {display:table-cell; vertical-align:middle; margin-left 10px;}
/*下面的CSS是针对IE7，IE6*/

这里我们需要定义三个DIV：
外层(outer) 可以根据需要定义高度、宽度，但是display必须为table。
中间层(middle) 可以有特定的CSS样式，例如：margin-left，但是display必须为table-cell，vertical-align必须为middle。
内层(inner) 主要是用来对付IE6和IE7的(注意:IE8支持table-cell居中，所以无需hack)。
有了上面的CSS，HTML代码可以这么写：

 

   

      把你要居中的文本放在这里
      这是第二行
      ...