居中终极版

水平居中

1. width:xxx + margin:0 auto
2. display:table + margin:0 auto table在表现上类似block，但宽度为内容宽。
3. absolute + left:50% + transform/负margin(子固定宽度)
4. 父元素 flex + justify-content:center
5. 父元素 flex + 子元素 margin:0 auto
6. inline 、inline-block、inline-table 、inline-flex + text-align:center
7. 子元素 absolute + left:0 + right:0 + margin:0 auto

垂直居中

• 图文垂直居中 img设置vertical-align:center，span的line-height设置和父div的height相同
• 单行行内元素 父元素height + 子元素line-height
• 多行行内元素
  1. 父元素 flex-direction:column + justify-content: center
  2. 父元素 flex + align-items:center;
  3. 父元素 table + 子元素 table-cell + vertical-align: middle
  4. absolute + top:50% + transform/负margin(子固定高度)
  5. 父元素 table + 子元素 table-cell + vertical-align: middle
     vertical-align只对拥有valign特性的元素(即表格元素)才生效，结合display: table 使得div模拟table属性。

    

        这是固定高度多行文本垂直居中，
        这是固定高度多行文本垂直居中。