原图:
水平居中操作步骤:
1.先让子盒子往右移动父盒子的一半
left:50%
2.再让子盒子往左移动自己的一半
- 普通做法:
margin-left: 负的子盒子宽度的一半
缺点:子盒子宽度变化后需要重新改代码
- 优化做法:
transform:translateX(-50%)
优点:表示沿着X轴的负方向(往左)始终移动自己宽度的一半,子盒子宽度变化不想要更改代码。
水平居中后显示效果:
水平垂直居中操作步骤:
1.先让子盒子往右往下移动父盒子的一半
left: 50%;
top: 50%;
2.再让盒子往左往上移动自己的一半,必须采用连写形式。
transform: translate(-50%, -50%);
水平垂直居中显示效果: