水平垂直居中的方法

1、定位+margin:auto

父级：相对定位；子级：绝对定位；top、right、bottom、left都为0，然后margin：auto

2、定位+margin:负值

父元素相对定位，子元素移动自身的50%，再设置子元素的margin-top和margin-left为负的自身宽高的一半，这种方法需要知道子元素的宽高；

3、定位+transform

和上一种方法基本一样，只是将margin负值改为transform：translate（-50%，-50%），不需要知道子元素的宽高；

4、table布局

设置父元素为display:table-cell，子元素为display:inline-block，再利用vertical和text-align可以让所有行内块级元素水平垂直居中；

5、flex弹性布局

display:flex;justify-content:center;align-items:center;

6、grid网格布局

display:grid;justify-content:center;align-items:center;