CSS各种姿势的文字垂直居中

高度固定的垂直居中：

空标签方法：

高度固定的垂直居中，想必大家想到的第一个就是line-height与容器等高的方法，但是如果文字更多呢？两行，三行，多行？这就涉及到一个多行文字，在固定高度容器中的垂直居中：

请随意添加文字成多行，这段文字依然垂直居中

代码如下代码框所示：

.wrap{vertical-align: middle;width: 500px;border: 1px solid #ccc;line-height: 0;}
.wrap span{vertical-align: middle;display: inline-block;width:300px;line-height: 1.2;color: #fff;background-color: #aaa;}
.wrap:before {vertical-align: middle;display: inline-block;content: "";width: 1px;height: 80px;overflow: hidden;}

<div class="wrap">
	<span>请随意添加文字成多行，这段文字依然垂直居中</span>
</div>

这种方法就是应用ico图标垂直居中的方式，添加一个宽度只有1px的盒子当作ico,另周围设置vertical-align的文字对应它垂直居中，当高度超过ico的时候，可以自动扩容；

表格table-cell方法：

还有一种比较笨的方法，就是把它做成表格，表格永远是HTML中规整起来最简单的玩意儿，

请随意添加文字成多行，这段文字依然垂直居中

请看如下代码：

<div style="display: table-cell;vertical-align: middle;height: 80px;">
	<span>请随意添加文字成多行，这段文字依然垂直居中</span>
</div>

position定位方式：

需要使用三层嵌套，HTML代码如下：

<div>
	<div>
		<span>请随意添加文字成多行，这段文字依然垂直居中</span>
	</div>
</div>

这个方法的问题在于，第二个div需要定高，top向上50%的距离。第三层根据第二层的高度，向上挪50%；正好居中。这种方法同样适用于水平居中；

.wrap{position:relative;width: 200px;height: 80px;border: 1px solid #ccc;}
.subwrap{position: absolute;top: 50%;height: 40px;}
.subwrap span{position: relative;top: -50%;}

图标与文字并齐：

图标与文字等高时：全部元素设为vertical-align:top;

图标与文字不等高时：文字line-height增高，大于图标高度，然后全体设置为vertical-align:middle;

文字置于一个标签中，并将背景设置在这个标签里。

关于基线的资料，可参考这里