flex实现居中对齐

之前我们是这样来实现上下居中对齐的：

.center-layout {|
	position: absolute;
	top: 50%;
	left: 50%;
	text-align: center;
	/* transform: translate(x, y)
	// x表示元素在水平方向（x轴）的移动距离，y表示元素在水平方向（y轴）的//移动距离。
	//注意，Y是一个可选参数，如果没有设置Y值，则表示元素仅仅沿着X轴正方形移动。*/
	transform: translate(-50%, -50%); 
}

而flex这样来实现：

.center-layout {
	display: flex;
	justify-content: center; // 内容自适应：上下居中
	align-items: center; // 子项对齐方式：左右居中
}

flex实现同样的效果，代码量更少，效果更直观。