一：水平居中
- 行内元素 text-align : center
- 块级元素 margin: 0 auto
- position:absolute; left:50%; transform: translateX(-50%)
- display:flex ; justify-ontent:center
二：垂直居中
- 一行内容设置line-height: height
- position:absolute; left:50%; transform: translateY(-50%)
- 父元素display:flex ; 子元素align-self:center
- vertical-align:middle （ inline-block元素才生效）
- 父元素display:table，子元素display：table-cell，vertical-align：middle