水平居中 4种写法

行内元素: text-align: center;

块级元素: margin: 0 auto;

使用定位+transform设置
position:absolute +left:50%+ transform:translateX(-50%);

使用flex设置居中
display:flex + justify-content: center;

垂直居中 4种写法

1.行内或者行内块元素
设置line-height 等于height ;

2.使用定位+transform
position：absolute +top:50%+ transform:translateY(-50%);

3.父元素设置flex布局,使用align-items来设置纵轴对齐
display:flex + align-items: center;

4.父盒子设置为一个表格单元格,使用vertical-align设置居中
display:table-cell + vertical-align: middle;