居中显示的效果

水平居中

1.知道宽度的情况下

用弹性盒子 flex来设置水平垂直居中
设置盒子周围为空白状态

2.不知道宽度的情况下

设置绝对定位，在顶部跟左边设置好一半的距离。
在设置偏移时，左右两边分别设置-50%。

垂直居中

1.知道高度的情况下

1-使用绝对定位居中

2-绝对定位与负边距实现

2.不知道高度的情况下

1-使用flex

给父类添加display:flex；实现垂直居中

align-items: center;属性实现垂直居中

2-使用定位position

然后用偏移transform: translate(x, y);

3-根据外边距结合position来实现

margin: 0 auto; 实现垂直居中

position：relative;

top:50%()； 顶部填充50%

transform: translateY(); 沿Y轴偏移。