垂直居中方法汇总

为了方便代码演示,容器 .box 等样式如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.box {
border: 1px solid #999;
height: 200px;
width: 300px;
position: relative;
}
.box>div {
width: 90px;
height: 90px;
border: 1px solid #000;
transition: all 0.3s;
}
.box>div:hover {
width: 150px;
height: 150px;
}

不脱离文档流

利用line-height

此方法关键是把行高设置成和容器高度相同

aaaaa
1
2
3
4
5
6
7
8
9
<style>
.line-height {
text-align: center;
height: 100px;
line-height: 100px;
}
</style>
<div class="box line-height">aaaaa</div>

优点:简单,方便,兼容所有浏览器。
缺点:只支持单行,主要适用于单行文本。

table 方式

table 的单元格是天生支持垂直居中的容器,其它标签可以设置 display 达到相同效果

sdfsdfd1111111111111s
sdfsdfds
sdfsdfds
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
.table {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.table>div {
display: inline-block;
vertical-align: middle;
}
</style>
<div class="box table">
sdfsdfd1111111111111s<br>sdfsdfds<br>sdfsdfds<br><div></div>
</div>

优点:支持多行,兼容所有浏览器。
缺点:IE7以下要用 table 标签,嵌套太多; 单元格属性与普通容器行为有差异。

vertical-align

1212
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style>
.vertical-align {
text-align: center;
}
.vertical-align::before {
content: "";
display: inline-block;
height: 100%;
width: 0;
vertical-align: middle;
}
.vertical-align>div {
display: inline-block;
vertical-align: middle;
}
</style>
<div class="box vertical-align">
<div></div>1212
</div>

优点:文本和其它内联元素混排时,垂直居中效果好;兼容所有浏览器;
缺点:不支持多行;IE8以下需要添加一个额外的空标签(替代伪元素)才能达到最好效果;

flex-box 布局

css3 中新增的布局方式, 解决了很多css2布局中的痛点, 垂直居中只是小意思


1111


aaaaaaa


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<style>
.flex {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
align-content: center;
}
.flex>div {
width: 50px;
height: 50px;
margin: 5px;
display: inline-flex;
}
.flex>div:hover {
width: 60px;
height: 60px;
}
</style>
<div class="box flex">
1111
<div></div>
<div></div>
<div style="height:80px;"></div>
<div></div>
<div></div>
</div>

优点:支持多行,flex布局是一种趋势,并有很多新特性;
缺点:IE10+才支持flex布局

grid 布局

一种网格思维的新布局方式, 垂直居中同样没问题, grid 还处于草案阶段

1
2
3
4
5
6
7
8
9
10
11
<style>
.grid {
display: grid;
grid-template-columns: auto;
grid-template-rows: auto;
justify-items: center;
align-items: center;
}
</style>
<div class="box grid"><div></div></div>

优点:支持多行,并有很多新特性;
缺点:兼容性差,grid 还处于草案阶段

脱离文档流

这里只演示 absolute 定位的元素,同样适用 fixed 定位的元素

margin负值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
.absolute-margin>div {
position: absolute;
left: 50%;
top: 50%;
width:100px;
height:100px;
border:1px solid #000;
margin-left: -51px;
margin-top: -51px;
}
</style>
<div class="box absolute-margin"><div></div></div>

优点:兼容好;
缺点:元素需要固定尺寸;

CSS3移位法

1
2
3
4
5
6
7
8
9
10
<style>
.absolute-translate>div {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
<div class="box absolute-translate"><div></div></div>

优点:元素可以不定宽高;
缺点:用到CSS3;可能会碰到渲染模糊的情况;

margin auto

普通块元素可以用 margin: 0 auto; 实现水平居中,现在用同样的原理来垂直居中,因为要配 right bottom,所以不支持IE6

1
2
3
4
5
6
7
8
9
10
11
12
<style>
.absolute-auto>div {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
</style>
<div class="box absolute-auto"><div></div></div>

优点:居中效果,兼容好;
缺点:需要标明尺寸,不支持被内容撑大的容器;极限情况下(元素比容器大时),元素不居中;

总结

方法 脱离文档流 多行支持 尺寸变化支持 兼容性 使用
利用line-height all 常用
table all 不常用
vertical-align all 推荐
flex flex流 IE10+ 推荐
grid grid流 IE10+ 不推荐
margin负值 all 常用
CSS3移位法 IE9+ 常用
margin auto IE7+ 推荐