元素居中的方式

1 水平居中

1 行内元素 
text-align:center
2 块级元素
inline-block+text-align
margin:0 auto
table+margin
absolute+transform
flex+justify-content
flex+margin
3 多块级元素
flex+justify-content
inline-block+text-align
4 浮动元素
通用办法 flex+justify-content
定宽的浮动元素 relative+负margin
不定宽的浮动元素 父子容器都用相对定位
5 绝对定位 absolute+margin:0 auto

2 垂直居中

1 单行内联元素
inline-height=height
2 多行内联元素
flex-direction+justify-content
table-cell+vertical-align
3 块级元素
absolute+负margin
absolute+transform
flex+align=items
table-cell+vertical-align

3 水平垂直居中

1 absolute+负margin
2 absolute:margin:auto
3 absolute+transform
4 justify-content+align-items
5 flex/grid+margin:auto