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、水平垂直居中(屏幕上水平垂直居中)