父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的height和line-height高度一致来实现的。如下代码： <divclass="container">Hi!Linux</div> c
父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的height 和 line-height 高度一致来实现的。如下代码：
<div class="container"> Hi! Linux</div>css代码：
<style>.container{ height:100px; line-height:100px; background:#999;}</style>文本垂直方向居中代码：
<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>垂直居中</title><style>.wrap h2{ margin:0; height:100px; line-height:100px; text-align:center; background:#ccc;}</style></head><body><!--下面是代码任务部分--><div class="wrap"> <h2>Hi! Linux</h2></div></body></html>主要代码：
height:100px; line-height:100px; text-align:center;-----------------------------------------------------------------------------------------------------------------------------------------
以下内容转载自：http://blog.163.com/zhaoyanping_1125/blog/static/20132915320120574238932/
问题：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>
