单行文本

相信大家对单行文本垂直居中并不陌生，让height等于line-height就可以，示例如下：

<p class="one_line">这里是高度为150像素的标签内的单行文字。</p>

.one_line{width:300px;height:150px;line-height:150px;text-align:center;font-size:12px;border:1px dashed#cccccc;color:#5588aa;}

图1：单行文字垂直居中

多行文本

1.基于vertical-align的方法

<div class="multi_line_1">

<p>这里是高度为150像素的标签内的多行文字，文字大小为12像素。这里是第二行，用来测试多行的显示效果。</p>

</div>

.multi_line_1{line-height:150px;}

.multi_line_1>p{display: inline-block; line-height: 1.4em; vertical-align: middle; background: #5588aa; margin-top:0;font-size: 12px;}

图2：多行文本垂直居中

2.基于table-cell的方法

其html代码参考“基于vertical-align的方法”，代码渲染结果同图2。

.multi_line_3{height:150px;display:table-cell;vertical-align:middle;}

.multi_line_3>p{background:#5588aa;}

3.基于calc()函数

calc()函数的出现，使我们可以在css中能动态计算长度值。其html代码参考“基于vertical-align的方法”，代码渲染结果同图2。

.multi_line_5{height:150px;position:relative;}

.multi_line_5>p{width:250px;height:70px;position:absolute;background:#5588aa;margin:0;top:calc(50% -35px);left:calc(50% -125px);font-size: 12px;}

浏览器对calc()函数的支持情况如下：

浏览器对calc()函数的支持情况

使用calc()函数时要注意，函数内部的-和+运算符的两侧各加一个空白符，否则会产生解析错误！这个规则如此怪异，是为了向前兼容：未来，在calc()函数内部可能会允许使用关键字，而这些关键字可能会包含连字符。

4.基于translate()

当我们使用绝对定位并将top设置为50%，此时待居中元素顶端距离父元素顶端的距离为父元素高度的一半，如果能将带居中元素向上移动自身高度的一半，则实现了垂直居中。随着css3的出现，使其变为可能，当我们在translate()变形函数中使用百分比时，是以这个元素自身的高度和宽度进行计算和移动的。其html代码参考“基于vertical-align的方法”，主要代码如下：

.multi_line_4{height:150px;position:relative;}

.multi_line_4>p{background:#5588aa;position:absolute;margin-top:0; transform: translate(-50%,-50%); top:50%;left:50%;}