时间：2021-07-01 10:21:17 帮助过：18人阅读
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代码可以这么写：