css水平垂直居中对齐方式

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;