实现垂直水平居中的四种方式

垂直水平居

实现垂直水平居中的前三种都是定位，还有一种是使用弹性布局

1. 最常见的
   position: absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;

2. 配合margin的百分比使用
   position: absolute;
top:50%;
left:50%;
margin:-50%;

3. 配合位移使用
   position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%)

4. 弹性盒子
   display: flex;
justify-content: center;
align-items: center;