子绝父相水平居中及水平垂直都居中解决方法

原图：

水平居中操作步骤：

1.先让子盒子往右移动父盒子的一半

left:50%

2.再让子盒子往左移动自己的一半

• 普通做法：

  margin-left: 负的子盒子宽度的一半

  缺点：子盒子宽度变化后需要重新改代码

• 优化做法：

  transform:translateX(-50%)

  优点：表示沿着X轴的负方向（往左）始终移动自己宽度的一半，子盒子宽度变化不想要更改代码。

水平居中后显示效果：

水平垂直居中操作步骤：

1.先让子盒子往右往下移动父盒子的一半

 left: 50%;
 top: 50%;

2.再让盒子往左往上移动自己的一半，必须采用连写形式。

transform: translate(-50%, -50%);

水平垂直居中显示效果：