css 水平垂直居中

定位加margin

定位之后设置top和left为50%，然后设置负值的margin-top和margin-left为要定位的盒子的高度和宽度的一半。

缺点：要计算定位盒子的宽度和高度。

定位加translate

同样的top和left为50%，然后transform: translate(-50%,-50%);
说明：
translate中的第一个值是X，为水平方向，当为负值时向左，当为百分比时为书写本属性的宽度百分比。
第二个值为Y，为垂直方向，为负值时向上，为百分比时为书写本属性的高度百分比。

优点：啥也不用计算，直接全部50%