垂直居中方法汇总

发表于 | 更新于 | 分类于 ，
CSS布局经常需要居中，水平居中还好，垂直居中稍显麻烦，这里只做总结了一些方法，仅供参考。

为了方便代码演示，容器 .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+ 推荐