css 对话框 水平居中,css 水平居中的几种实现方式

前言

设计是带有主观色彩的，同样网页设计中的 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 种水平居中的实现方法，相信还要更多的方式。不过不管哪种方法，能在业务代码实践中最快速、最准确的运用才是最佳实践。

希望在读的各位能有所收获。

关于我

一名工作在一线的前端工程师，乐于实践，并分享前端开发经验。

关注【前端雨爸】，欢迎评论留言，愿与各位交流进步。

点击 ↙ 了解更多，了解更多前端开发技术文章。！

举报/反馈