CSS实现垂直居中的各种手段 - 总结

垂直居中的总结

浏览掘金的过程中，看见了一篇全面介绍垂直居中的文章，然后脑海里面回想如何做到垂直居中，只能想出一两种手段。于是秉承着增加自己能力的想法，开始阅读文章，并且在此做下记录，以便以后回溯。

下属所有方法的浏览器兼容性请在CanIUse上查询

1.line-height

line-height用于设置行间的距离，该属性会影响行框的布局，在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。

并且定义line-height之后，line-height与font-size的计算值之差会被分为两半，分别加到一个文本行内容的顶部和底部。

于是，当设置line-height值等于height时，文本行内容就会呈父元素的居中显示。

.parent-node{
	height:200px;
	line-height:200px;
}

2.position:absolute(已知尺寸，绝对定位)

position:absolute绝对定位之后，我们可以设置top,bottom,right,left的值，从而让子元素相对于父级最近的非position:static的元素进行偏移。

于是，就可以设置top:50%,left:50%,再通过负margin来做到垂直水平居中。

.parent-node{
	position:relative;
}
.child-node{
	width:100px;
	height:100px;
	position:absolute;
	left:50%;
	top:50%;
	margin-top:-50px;
	margin-left:-50px;
}

3.position:absolute + transform

此处使用transform的translate属性来替换margin，从而实现垂直水平居中。能如此实现居中的主要原因是translate的百分比是以当前对象作为参照。

因此此方式不必预先知道元素的尺寸。

.parent-node{
	position:relative;
}
.child-node{
	width:10em;
	height:10em;
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
}

4.position:absolute + margin:auto

若想理解为何设置margin:auto和left,right,bottom,top:0之后能够居中，就需要知道CSS3的流体特性,由于能力有限，请参考张鑫旭老师的文章。

再阅读了上述文章之后，再阅读以下代码就一目了然了。

.parent-node{
	position:relative;
}
.child-node{
	width:10em;
	height:10em;
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	margin:auto;
}

5.padding (只适用于块级元素)

对于包含块高宽固定，且需要居中的块级元素高宽的情况下，可以使用padding来实现垂直居中，不过此方法十分笨拙，且不利于维护

.parent-node{
	width:100px;
	height:100px;
	background:cyan;
}
.child-node{
	width:50px;
	height:50px;
	background:gray;
	padding:25px;
}

6.display:table-cell

vertical-align属性在cell中可以实现居中效果，但是table-cell只有在IE8以上才支持，因此对于需要兼容IE6的团队来说，请考虑其他方法

.parent-node{
	display:table;
	width: 800px;
	height: 400px;
	border: 1px solid red;
}
.child-node{
	display: table-cell;
	vertical-align:middle;
}

7.display:flex

flex属性是Css3新增的，因此其兼容性存在问题，不过如果是移动端，那么丝毫不用顾虑，就使用它吧

.parent-node{
	width: 600px;
	height: 200px;
	border: 1px solid red;
	display: flex;
	align-items:center;
	justify-content: center;
}
.child-node{
	background: blue
}

8.伪元素 + vertical-align

使用伪元素，然后设置height:100%，vertical-align:middle来撑起整个包含块，然后子元素(即需要进行居中显示的元素)则直接沾伪元素的光实现居中

.parent-node{
	width:600px;
	height:500px;
	background:grey;
	text-align:center;
}
.parent-node::before{
	content:'';
	display:inline-block;
	height:100%;
	vertical-align:middle;
}
.center-node{
	display:inline-block;
	vertical-align:middle;
	line-height:300px;
	width:100px;
	height:300px;
	background:cyan;
}

9.calc

允许在Css中进行百分比与长度单位计算的方法，但是兼容性并不好，在IE9以上才支持，并且需要知道元素的尺寸

.parent-node{
	width:300px;
	height:300px;
	border: 1px solid red;
	position: relative;
}
.child-node{
	width: 100px;
	height: 100px;
	background: blue;
	padding: calc((100% - 100px) / 2);
	background-clip:content-box;
}

总结

如上所示，垂直居中的手段有很多种，而且掌握了原理之后还可以衍生出更多的变型，但是万变不离其宗，因此理解其原理是最为重要的，希望本篇文章能够帮助到还在为垂直居中犯愁的同学们。

参考文章

CSS设置居中的方案总结-超全
CSS深入理解流体特性和BFC特性下多栏自适应布局