CSS布局解决方案——居中布局（水平居中）

方案一：使用inline-block+text-align

(1)原理：先将子框由块级元素改变为行内块元素，在通过设置行内块元素居中以达到水平居中。

(2)用法：对子框设置display:inline-block;对父框设置text-align:center;

(3)示例：

(4)优点：兼容性好，甚至可以兼容IE6,IE7

(5)缺点：child里的文字也会水平居中，可以在.child添加text-aligin:left；还原

方案二：使用table+margin

(1)原理：先将子框设置为快级表格来显示（类似），在设置子框居中以达到水平居中。

(2)用法：对子框设置dispiay:table;再设置margin:0 auto;

(3)示例：

(4)优点：只设置了child，IE8以上都支持

(5)缺点：不支持IE6，IE7,将div改成table

方案三：使用absolute+transform

方案四：使用flex+margin

方案五：使用flex+justify-content