元素实现水平垂直居中的方法？

可以把元素水平垂直居中的方法分为两类：

• 居中元素的宽高已知
• 居中元素的宽高未知

实现方式：

• 利用定位 + margin：auto

父级设置相对定位，子级设置绝对定位，并且top、left、right、bottom都设置为0.此时如果子元素没有设置宽高，将会被拉满整个父元素的空间。

• 利用定位 + margin：负值

• 利用定位 + transform 此方法和第二个方法基本一样，只不过把margin负值变为transform（-50%,-50%）
• table 布局 设置父元素为display:table-cell，子元素设置 display: inline-block。利用vertical和text-align可以让所有的行内块级元素水平垂直居中

• flex 布局 个人比较喜欢的写法，也是比较推荐的写法
• display: flex 时，表示该容器内部的元素将按照 flex 进行布局
• align-items: center 表示这些元素将相对于本容器水平居中
• justify-content: center也是同样的道理垂直居中

• grid 布局