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;}
优势:实现起来简单,尤其是使用在响应式布局中
劣势:兼容性差,如果大面积的使用该布局可能会影响效率