css水平垂直居中总共有四种方法
① 使用绝对定位
注意:使用绝对定位居中需要固定宽高
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
width:xxx;
height:xxx;
margin:auto;
②使用绝对定位 + calc()
需要知道具体的元素宽高值
position:absolute;
width:xxx;
height:xxx;
top:calc(50% - xxx/2);
left:calc(50% - xxx/2);
③使用绝对定位 + transform
不需要知道元素的宽高
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%)
④使用弹性布局
display:flex;
justify-content:center;
align-items:center;