前端秘籍，看程序员如何用九个招式，搞定css水平居中

CSS水平居中 text-align:center是前端工程师的基本功，我在项目中常常遇到CSS水平居中的需求，这篇教程将我以往用过的9种CSS实现水平居中的方法总结出来，也方便往后再用到时回顾。

工具/原料

CSS
text-align:center

方法/步骤

1.经过margin: 0 auto; text-align: center实现CSS水平居中。

这种方法是实现CSS水平居中最最经常使用的，我在前端开发中大概有60%的CSS水平居中就是经过“margin: 0 auto; text-align: center”实现的。

​

2.经过display:flex实现CSS水平居中。

随着愈来愈多兼容flexbox，因此经过“display:flex”实现CSS水平居中的方案也愈来愈受青睐。

经过display:flex实现CSS水平居中的原理是父元素display:flex;flex-direction:column;而子元素align-self:center;

这个跟CSS垂直居中的原理是同样的，只是在flex-direction上有所差异，一个是row(默认值)，另一个是column。

​

3.经过display:table-cell和margin-left实现CSS水平居中。

对于父元素和子元素的宽度都肯定的状况，适合经过display:table-cell和margin-left实现CSS水平居中。

使用时，父元素display:table-cell，子元素给剩余宽度一半的margin-left。

​

4.经过position:absolute实现CSS水平居中。

这种方法跟上一个方法适用场景同样，也是适用于父元素和子元素的宽度都肯定的状况。

使用时，父元素position:absolute，子元素给剩余宽度一半的margin-left。

作为一名前端程序员，有一个学习的氛围跟一个交流圈子特别重要。这是个人一个前端学习交流群 330336289（邀请码：寂静），想学习交流前端，打算深刻了解这个行业的朋友，无论你是小白仍是大牛都欢迎加入，你们一块儿交流学习。

5.经过width:fit-content实现CSS水平居中。

这种方法能够确保子元素宽度不肯定的状况下，也能实现CSS水平居中。

须要注意的是，须要配合“margin: 0 auto; text-align: center”使用。

​

6.经过display:inline-block和text-align:center实现CSS水平居中。

display:inline-block能改父元素内的子元素的表达样式，一样须要配合“margin: 0 auto; text-align: center”使用。

7.经过position:relative、float:left和margin-left实现CSS水平居中。

给父元素样式position:relative，给子元素float:left和margin-left就能够实现CSS水平居中。

8.经过隐藏节点+float的方法实现CSS水平居中。

咱们能够经过增长一个隐藏节点，而后使其float:left，这样子元素就会被隐藏节点推着水平居中。

这种增长隐藏节点方法也适用于CSS垂直居中，原理同样，可是不用float。

9.经过transform实现CSS水平居中。

这种方法是最不推荐的方法，由于transform属性在各个浏览器中的表现行为不一致，因此会出现一些兼容性的问题，只有当已知用户浏览器时才推荐使用。

​

注意事项

CSS水平居中的第一、三、4种方法的浏览器兼容性最好，其它方法或多或少都存在一些浏览器兼容性上的不足