在不固定的多行文字中，如何用css实现让他们垂直居中的各种方法集合

在这里就简单整理记录一下。。

1、使用display: table-cell垂直居中

关于display: table-cell属性，看字面大家应该都知道的，他可以让标签元素以表格单元格的形式呈现，类似于td标签，其实它是有兼容，这里我们是在讨论移动端的，就先不说他的兼容性了。对于td单元格，它有一些比较特别的属性，例如垂直居中对齐等。

这里正是使用它的这一特性。如下例子所以：

html代码：

<div class="box box1">
	 <span>我是要被垂直居中的文字内容</span>
</div>

css代码：

.box1{ display: table-cell; text-align: center; vertical-align: middle }

效果：

2、使用display: flex垂直居中

这里主要是用到css3的弹性盒子属性来实现的，display: flex、justify-content: center、align-items: center这三个属性

html：

<div class="box box2">
	<span>我是要被垂直居中的文字内容</span>
</div>

.box2{ display: -webkit-flex; display: flex; justify-content: center; align-items: center;}

3、使用translate(-50%,-50%)

html：

 <div class="box box3">
	<span>我是要被垂直居中的文字内容<br/>我是要被垂直居中的文字内容</span>
</div>

css:

.box3{ position: relative; }
.box3 span{ position: absolute; left: 50%; top: 50%;  -webkit-transform: translate(-50%,-50%)}

4、使用display:box

其实这个跟第二种方法类似的。

css：

.box4{ display: -webkit-box; display: box; -webkit-box-pack: center;-webkit-box-align: center; }