前言
设计是带有主观色彩的，同样网页设计中的 css 一样让人摸不头脑。网上列举的实现方式一大把，或许在这里你都看到过，但既然来到这里我希望这篇能让你看有所收获，毕竟这也是前端面试的基础。
实现方式1、text-align 方式
text-align 是入门最常用的属性，根据字面意思是文本对齐用的。
只需在父级标签上设置即可，虽然内部的子元素不管是块级元素 or 非块级元素都可以使用，但需注意块级元素会占用整行的宽度，文本是在这个宽度中作水平居中。
代码举例
页面效果
2、定宽 margin auto 方式
这也是常见的水平居中方式，通过设置子元素的 margin 属性来控制距离父元素的距离。需要注意：子元素如果是块级元素，就最好设置宽度，不然就会占满于父元素，在通过 text-align 文本居中对齐就没有意义了。对于非块级元素必须要设置宽度。
代码举例
页面效果
3、flex 方式
通过设置浮动布局来实现居中，这是相对上两种方法某种程度上最简单的实现，因为在其基础上可以做更多布局的扩展，不用担心破坏布局。
如果你不了解 flex 布局，可以看下这个链接：
https://eminoda.github.io/2018/08/20/css-flex/
设置 justify-content 轻松搞定定位：
代码举例
页面效果
4、position 浮动 方式
现在这两种是比较有趣的定位方式，实际场景不建议使用，我是不愿意别人这样写，脑袋还要转个弯，来理解这样布局的计算方式。
如果元素是块级元素，通过 float 浮动属性，将它的宽度“抹去”。然后通过对于上级元素的相对定位通过错位修正的方式来居中。
让父元素的左侧从中间开始定位，子元素再根据自己的实际宽度往左偏移一半达到水平居中的目的。
代码举例
页面效果
5、position transform 方式
思路同上，不同的是这次设置子元素为绝对定位，并距离左侧偏离一半，最后通过 transform 根据元素的实际宽度往左再偏移一半，达到居中效果。
代码举例
页面效果
总结
上面只列举了 5 种水平居中的实现方法，相信还要更多的方式。不过不管哪种方法，能在业务代码实践中最快速、最准确的运用才是最佳实践。
希望在读的各位能有所收获。
关于我一名工作在一线的前端工程师，乐于实践，并分享前端开发经验。
关注【前端雨爸】，欢迎评论留言，愿与各位交流进步。
点击 ↙ 了解更多，了解更多前端开发技术文章。！
,
