水平居中的五种方法及其优缺点

本文主要是介绍水平居中的五种方法及其优缺点，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

<div class="parent"><div class="child">test</div></div>

第一种：

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

优点：代码少，兼容性好  inline-block ie6-7不兼容（可用inline+zooom:1）

缺点：text-align 会将文字移动，有时需text-align:left解决；

第二种：

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

优点：兼容性好 IE8及以上，不影响父元素

缺点：IE6-7不支持（需将HTML变为table结构）

第三种：

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

优点：不定宽

缺点： 兼容性不好

第四种：

.parent{display: flex;justify-content: center;
}

优点：简洁

缺点：兼容性不好

第五种：

.parent{display: flex;
}.child{margin:0 auto;
}

优点：简洁

缺点：兼容性不好

这篇关于水平居中的五种方法及其优缺点的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---