之前在做移动端的时候,有个需求,就是需要在固定高度,不固定内容的多行文字要垂直居中。想必大家都知道,其实有多种方法,
比如我们可以display: table-cell,其次我们还可以使用css3的弹性盒子display: flex、css3的translate(-50%,-50%)等等让他们垂直居中。

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

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>
css:
.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; }