之前我们是这样来实现上下居中对齐的:
.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实现同样的效果,代码量更少,效果更直观。