CSS如何让页面元素水平居中？

网友解答: 利用css让页面元素水平居中的方式有很多，下面简单的介绍几种实现方式，供大家参考：外边距（margin）利用margin:0 auto来实现元素水平居中，具体实现，看下图cs

利用css让页面元素水平居中的方式有很多，下面简单的介绍几种实现方式，供大家参考：

利用margin:0 auto来实现元素水平居中，具体实现，看下图css代码：

利用绝对定位（position）+margin-left来实现元素水平居中，看下图css代码：

效果图：

总结：

这两种方式都是对块级元素实现水平居中，如果是行内元素的话，可以使用属性text-align:center；当然还有其他实现方式，这里就不一一介绍了；如有疑问，欢迎大家在评论下方留言讨论。

让行内元素水平居中很简单，直接用text-align:center;就可以了。但是要让块级元素水平居中，方法有很多，当然也看具体情况来用哪种方法，下面介绍一下，我常用的几种方法。

1.margin:0 auto;

这个方法只能是元素在正常文档流中的时候才能用，如果用了其他的一些定位，脱离了正常文档流，那就不能用了。

2.position:absolute;left:50%;transform:translateX(-50%);

这个是适用于绝对定位的场景

3.display:-webkit-box;-webkit-box-pack:center;

这个方法可以说效果是比较好的，当然这时你需要用box布局