水平垂直居中的方法及其优缺点

<div class="parent">
	<div class="child"></div>
</div>

可以综合之前两篇文章的方法来做：

第一种：

.parent{
	text-align: center;
	display: table-cell;
	vertical-align: middle;
}

.child{
	display: inline-block;
}

优点：兼容性高

缺点：

第二种：

/* 2 */
.parent{
	position: relative;

}

.child{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

优点：简洁

缺点：兼容性不好

第三种：

默认flex-direction:row , 所以align-items 是设置垂直方向的， justif-content 是设置水平方向的；

/* 3 */
.parent{
	display: flex;
	align-items: center;
	justify-content: center;
}

flex-direction:column 时， align-items 是设置水平方向的， justif-content  是设置垂直方向的，

优点：设置父元素即可

缺点：兼容性不好