CSS实现水平居中和垂直居中

发表于 | 分类于

在前端面试中，对于元素进行水平和垂直居中的问题，问的频率确实很高，如何回答呢？总结如下（不完整）

水平元素居中：行内元素解决方案

只需要把行内元素包裹在一个属性display为block的父层元素中，并为父层元素添加如下属性

1
2
3
.parent{
	test-align:center;
}

水平元素居中：块状元素解决方案

1
2
3
.item{
	margin:10px auto;
}

水平居中：多个块状元素解决方案

将元素的display属性设置为inline-block,并把父元素的text-align属性设置为center即可：

1
2
3
.parent{
	text-algn:center;
}

水平居中：多个块状元素解决方案(使用flexbox布局实现)

使用flexbox布局，只需要把待处理的块状元素的父元素添加属性display:flex及justify-content:center即可

1
2
3
4
.parent{
	display:flex;
	justify-content:center;
}

垂直居中：单行的行内元素解决方案

1
2
3
.parent{
	height:200px;
}

将子元素的height和line-height设置和父元素同样高度即可

1
2
3
4
.item{
	height:200px;
	inline-height:200px;
}

垂直居中：多行的行内元素解决方案

组合使用display:table-cell和vertical-align:middle属性来定义需要居中的元素的父元素来实现

1
2
3
4
5
6
7
.parent{
	width:300px;
	height:300px;
	/*以下属性实现垂直居中*/
	display:table-cell;
	vertical-align:middle;
}

垂直居中：已知高度的块状元素解决方案

1
2
3
4
5
6
.item{
	top:50%;
	margin-top:-50px; /*margin-top值为自身高度的一半*/
	position:absolute;
	padding:0;
}

水平垂直居中：已知高度和宽度的元素解决方案1

可自适应，比方案2更智能

1
2
3
4
5
6
7
8
.item{
	position:absolute;
	margin:auto;
	left:0;
	top:0;
	right:0;
	bottom:0;
}

水平垂直居中：已知高度和宽度的元素解决方案2

1
2
3
4
5
6
7
.item{
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-75px; /*设置margin-left(margin-top)为自身宽度（高度）的一半*/
	margin-left:-75px;
}

水平垂直居中：未知高度和宽度的元素解决方案

1
2
3
4
5
6
.item{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%); /*使用css3的transform来实现*/
}

水平垂直居中：使用flex布局来实现

1
2
3
4
5
6
7
.parent{
	display:flex;
	justify-content:center;
	align-items:center;
	/*注意这里需要设置高度来查看垂直居中效果*/
	height:300px;
}