水平居中的多种实现方法

inline-block+text-align

image.png

优点在于：

1. 父子元素都可以不定宽
2. 兼容到IE6
   缺点在于如果子元素不是一个，而是多个子元素，在没有设置子元素margin情况下，子元素相互间会有间距，是由于代码的换行导致的

�table+margin

image.png

table在表现上很像block元素，但是其宽度是自适应的，兼容到IE8

�absolute+transform

image.png

flex+justify-content

image.png

首先flex-item元素宽度自适应，这套方法的优点在于只用设置父元素，缺点在于CSS3的兼容性

margin+width

不用设置其它元素属性，直接设置本身margin：0 auto；

浮动元素+relative

父子元素同时左浮动，然后父元素相对向左移动50%，再然后子元素相对右移动50%，或者子元素相对左移动-50%也就可以了。

借用别人的图.png