问题：vertical-align，在div中设置文本垂直居中，是不起作用的。那怎么样设置div的文本垂直居中哦！

关于"CSS文本垂直居中"的文章在网上可以找到很多，它们主要涉及3种方法：

1、单行文本垂直居中：

方法：把文本段落高度(line-height)和所在区域高度(height)设为一致即可。

缺点：这种方法只对单行文本有效。

代码：

<div style="border:1px solid #ccc; height:50px; line-height:50px;">

网站开发日志

</div>

2、多行文本垂直居中：

方法: 不设区域高度(让高度自适应), 然后在区域上下位置使用相同的填充控制，即使用padding属性。

缺点：对固定高度的区间无效。

代码：

<div style="border:1px #ccc solid; padding:20px 0; width:578px;">

本博客用于记录网站开发的点点滴滴。包括网站设计，编程指南，资源和灵感。

本站的文章大都是原创或者翻译作品。

</div>

3、浏览器居中：

方法: 设置position属性为绝对(absolute), 然后把在上方留下浏览器高度一半减去文本区域高度一半的距离，例如文本区域高度为浏览器高度的20%，那么上方应该留下50%-10%=40%；同理，在左边留下浏览器宽度一半减去文本区域宽度一半的距离。

缺点：这种方法只是让文本在落在浏览器中央，而并非在某个特定区域的中间。

代码：

<div style="position:absolute; top:40%; left:40%; width:20%; height:20%">

本博客用于记录网站开发的点点滴滴。包括网站设计，编程指南，资源和灵感。

本站的文章大都是原创或者翻译作品。我并不反对转载，因为互联网本来就是用来共享资源的。

但是当你引用我的文章时，请注明出处。谢谢！

</div>

 

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*/

<!--[if lte IE 7]>

<style>

.outer{position:relative;}

.middle{position: absolute; top: 50%;}

.inner{position: relative; top:-50%}

</style>

<![endif]-->

这里我们需要定义三个DIV：

外层(outer) 可以根据需要定义高度、宽度，但是display必须为table。

中间层(middle) 可以有特定的CSS样式，例如：margin-left，但是display必须为table-cell，vertical-align必须为middle。

内层(inner) 主要是用来对付IE6和IE7的(注意:IE8支持table-cell居中，所以无需hack)。

有了上面的CSS，HTML代码可以这么写：

<div class="outer">

  <div class="middle">

    <div class="inner">

      把你要居中的文本放在这里

      这是第二行

      ...

    </div>

  </div>

</div>