CSS垂直居中、水平居中方式的总结
水平居中：
- margin: 0 auto;（适用于块级元素，且必须设置了宽度）
- text-align: center;（适用于行内元素、行内-块级元素）
- position: absolute
left: 50%;
transform: translateX(-50%);（适用于定位元素，且没有设置宽度）
- display: flex;
justify-content: center;（适用flex布局）
垂直居中：
- line-height:父元素高度;（适用于单行行内元素）
- display: table-cell;
vertical-align:middle;（适用于多行行内元素）
- position: absolute
top: 50%;
transform: translateY(-50%);（适用于定位元素，且没有设置高度）
- display: flex;
align-items: center;（适用flex布局）
水平垂直居中：
- position: absolute
top: 50%;
left: 50%;
transform: translate(-50%, -50%);（适用于定位元素，且没有设置宽高）
- display: flex;
align-items: center;
justify-content: center;（适用flex布局）
