CSS居中的方式

1、内联元素水平居中

2、块级元素水平居中

3、多块级元素水平居中(利用inline-block)

4、多块级元素水平居中(利用display: flex)

5、垂直居中(单行内联(line-height)元素垂直居中)

6、垂直居中(多行元素垂直居中利用表布局（table vertical-align: middle）)

7、垂直居中(多行元素垂直居中利用flex布局（flex-direction: column）)

8、伪元素—利用“精灵元素”(ghost element)技术实现垂直居中，即在父容器内放一个100%高度的伪元素，让文本和伪元素垂直对齐，从而达到垂直居中的目的

9、块级元素垂直居中(固定高度的块级元素)

10、块级元素垂直居中(未知高度的块级元素)

11、水平垂直居中(固定宽高元素水平垂直居中)

12、水平垂直居中(未知宽高元素水平垂直居中)

13、水平垂直居中(利用flex布局)

14、水平垂直居中(利用grid布局)

15、水平垂直居中(屏幕上水平垂直居中)