文章标题

1.使用table来实现

.child{display: table; margin: 0 auto;}

   优势：不需要父容器parent，只需要对自身进行设置   劣势：IE6、7需要调整结构

2.使用inline-block和text-align来实现

.parent{text-align: center;}.child{display: inline-block;}

   优势：兼容性好   劣势：需要同时设置子元素和父元素

3.使用绝对定位absolute来实现

   使用绝对定位来实现水平居中布局有两种情况，一种子容器无宽度，另一种子容器有宽度。无宽度可以用一下代码，如果是有宽度，则可以设置margin-left负值为容器宽度的一半。

.parent{position: relative;}.child{position: absolute; left: 50%; transform: translateX(-50%);}

   优势：无需设置容器宽度，在移动端可以使用   劣势：兼容性差，需要IE9及以上浏览器的支持

4.使用flex布局来实现

   flex有两种方法来实现水平居中，父容器设置display：flex， 一种直接在父容器中设置justify-content属性值center。第二种在子容器中使用margin： 0 auto

.parent{display: flex; justify-content: center;}   .child{margin: 0 auto;}

   优势：实现起来简单，尤其是使用在响应式布局中   劣势：兼容性差，如果大面积的使用该布局可能会影响效率