盒子垂直水平居中

六种方法实现：弹性布局2种，网格布局2种，定位2种

1.弹性布局只在父盒子中设置
父盒子设置：
display：flex
justify-content:center
align-items:center

2.弹性布局
父盒子：display:flex;
子盒子：margin：auto

3.网格布局
父盒子：display:grid
子盒子：margin：auto

4.网格布局
父盒子：display:grid;
子盒子：
justify-self:center;
align-self:center

5.定位+transform：translate(-50%,-50%)
父盒子：position:relative
子盒子：
position:absolute
left:50%
top:50%;
transform：translate(-50%,-50%)

6.定位+四个方向都设置为0+margin:auto
父盒子：position:relative
子盒子：
position:absolute
left:0
right:0
top:0
bottom:0
margin auto