文字垂直居中

文字垂直居中方案

在工作中,我们经常碰到“文字垂直居中”的问题,需要居中的文字有单行,也有多行,在各种情况下的垂直居中分别该怎么解决?

单行文字

  • 容器高度固定 height + line-height

在固定高度的容器中,单行文字垂直居中,只需要将文字的行距设置成容器的高度即可。

1
2
3
4
.vertical-line {
height: 100px;
line-height: 100px;
}

DEMO


  • 容器高度不定 table + table-cell + vertical-align: middle

当盛放单行文字的容器高度不固定,上面的方法就不起作用了,此时就只能采用表格样式了。其实这种方法也适用于多行文字的情况。

1
2
3
4
5
6
7
8
div {
display: table;
}
p {
display: table-cell;
vertical-align: middle;
}
1
2
3
4
5
<div>
<p>
p的高度随div高度变化而变化,单行文字垂直居中
</p>
</div>

DEMO


多行文字

多行文字垂直居中相比单行文字来说,就有点复杂了,最先想到的,就是上面所说的容器高度不固定下的居中方法。

接下来,对于垂直居中,我们能想到的属性是vertical-align:middle,再配合display: inline-block,应该是可以的:

1
2
3
4
5
6
7
<div>
<p>
多行文字垂直居中<br>
多行文字垂直居中<br>
多行文字垂直居中
</p>
</div>
1
2
3
4
p {
display: inline-block;
vertical-align: middle;
}

然而写出来,并没有垂直居中的效果:

DEMO


其实,vertical-align的对齐,在非display:table下,是需要有参照物的,所以我们想到在容器里边添加一个高度等于容器高度、宽度为0的参照物,哎,对了,:before要登场了:

1
2
3
4
5
6
7
8
9
10
11
div:before {
content: '';
display: inline-block;
vertical-align: middle;
width: 0;
height: 100%;
}
p {
display: inline-block;
vertical-align: middle;
}

然而,想法是美好的,现实是残酷的,本来想着垂直居中的文字,直接出去了:

这个时候可能想到是不是文字内容区域太宽了,好,开始调整宽度:

但是当选中之后,却发现,文字区域前面有间距:

why?还能不能好好渲染了,哎,等会,前面的before好像算文字哎,难道是font-size的问题?把外层容器的font-size设为0:

果然,这样就很和谐了嘛 DEMO


当然,上面的方法兼容性是很好的,IE8+都是没有问题的,但是table布局不方便,display: inline-block + vertical-align:middle 处理方式有点繁琐。如果你做的需求可以不用管低版本浏览器,那好,往下看:

css3的flex是为布局为布局而生的,先拿它试试:

1
2
3
display: flex;
align-items: center;
justify-content: center;

对于,长宽已知的元素,水平垂直居中可以采用下面的方式来居中:

1
2
3
4
5
6
//假设 width:100px,height:60px;
position: absolute;
top: 50%;
margin-top: -30px;
left: 50%;
margin-left: -50px;

可能现在有人会想到

-50%```,不好意思,这个50%是父元素的,这样写等于又把它放回去了。但是,```transform: translate```好像平移的是自己,试试?
1
2

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
```

没毛病!

以上差不多就是几种常见的未知高度垂直居中的方法,时间仓促,多提意见。