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;