text-align:CSS居中是前端工程师的基本功，我在项目中经常遇到CSS横向居中的需求。本教程总结了我过去使用过的九种实现CSS横向居中的方法，也方便以后再次使用时复习。另外，为了快速了解CSS水平居中的实现，我为这个教程录制了一段视频，供同学们观看。
通过边距：0自动；实现CSS的水平居中。这种方法是实现CSS水平居中最常用的方法。我在前端开发中的CSS水平居中大约有60%是通过“margin:0 auto；文本对齐：居中”。
通过display:flex实现CSS水平居中。随着越来越多的flexbox兼容，通过“display:flex”将CSS水平居中的方案越来越流行。通过display实现CSS水平居中的原理：flex是父元素display:flex；伸缩方向：列；以及子元素align-self:center；CSS的垂直居中原理是相同的，但在弯曲方向上有所不同。一个是row(默认值)，另一个是column。
CSS的水平居中是通过display实现的：table-cell和margin-left。当父元素和子元素的宽度都确定时，适合通过display:table-cell和margin-left来实现CSS水平居中。使用时，父元素显示：table-cell，子元素给出左边距，剩余宽度为一半。
通过位置实现CSS水平居中：绝对。与前一种方法一样，这种方法也适用于父元素和子元素的宽度都确定的情况。当使用时，父元素位置：absolute，子元素给出剩余宽度一半的左边距。
通过width:fit-content实现CSS水平居中。这种方法可以确保即使子元素的宽度不确定，CSS也可以水平居中。需要注意的是，需要配合“margin:0 auto；文本对齐：居中”。
CSS通过display:inline-block和text-align:center水平居中。Display:inline-block可以改变父元素中子元素的表达风格，还需要搭配“margin:0 auto；文本对齐：居中”。
CSS的水平居中是通过position:relative、float:left和margin-left实现的。给父元素样式position:relative，给子元素float:left和margin-left，实现CSS水平居中。
CSS的水平居中是通过隐藏节点浮动来实现的。我们可以添加一个隐藏节点，并使它浮动：左，这样元素将被隐藏节点水平推动并居中。这种添加隐藏节点的方法也适用于CSS垂直居中。原理是一样的，但是没有使用float。
通过变换实现CSS水平居中。这种方法是最不推荐的，因为不同浏览器的transform属性不一致，所以会有一些兼容性问题。仅当用户的浏览器已知时，才建议使用。
特别提示
中等CSS级别的第一、第三和第四种方法的浏览器兼容性最好，其他方法的浏览器兼容性都有一些不足。
