这标签虽然简单，但早被W3C淘汰，兼容性也是一塌糊涂。

我见过不少老项目，因为用了这个标签，在移动端直接乱套。

所以，咱们得用现代的方法，也就是CSS。

第一种方法，最经典，也最稳妥，就是margin: 0 auto。

这招对付块级元素简直无敌，比如一个固定的宽度div。

只要给父容器设置text-align: center，子元素设置margin: 0 auto，它就乖乖居中。

但注意，子元素必须有明确宽度，不然它占满整行，margin就失效了。

我有个客户，之前为了省事，没给宽度，结果在手机上显示得乱七八糟。

后来我帮他加上width: 80%，瞬间清爽。

第二种方法，Flex布局，现在的主流玩法。

display: flex; justify-content: center;

这两行代码下去，不管里面是图片、文字还是复杂组件，统统居中。

这是我最推荐的方式，简单粗暴，兼容性好。

除非你要支持那种上古时代的IE8浏览器，否则闭眼用这个。

我最近帮一个电商客户重构页面，就是用的这招。

原本需要写一堆hack代码才能搞定的对齐，现在两行搞定。

效率提升了不止一倍，客户看得直点头。

第三种方法，Grid网格布局，适合复杂的大局控制。

display: grid; place-items: center;

这招更狠，连父容器的高度都要设定，不然可能居中不了。

但一旦设好，子元素在水平和垂直方向都能完美居中。

适合那种需要卡片式布局或者全屏居中的场景。

不过对于初学者，可能稍微有点绕，建议先掌握前两种。

这里还要提醒一点，很多人搞混了文本居中和元素居中。

text-align: center只管文本和图片，不管块级盒子。

margin: 0 auto只管块级盒子，不管里面的文字。

如果你发现盒子居中，但里面的字还在左边，记得给盒子内部也加text-align。

我见过太多人在这上面栽跟头，反复调试半天，结果只是忘了这一行。

还有，别忘了清除浮动和默认边距。

很多时候居中失效，是因为浏览器默认的margin在捣乱。

加一句* { margin: 0; padding: 0; } 能省去不少麻烦。

当然，具体用哪种，还得看你的实际需求。

如果是简单的文章标题，Flex足够。

如果是复杂的后台管理系统，Grid可能更合适。

别迷信某一种方法，灵活组合才是王道。

我在行业里摸爬滚打这么久，见过太多人死磕代码，却忽略了用户体验。

居中不仅仅是为了好看，更是为了引导用户的视线。

一个居中的按钮，点击率往往比偏左的高出不少。

所以，别把它当成枯燥的技术问题，当成设计问题来看待。

最后给点真心建议。

别光看教程，自己动手敲一遍。

哪怕是最简单的div居中，也要亲手试错几次。

遇到bug别慌，打开浏览器控制台，检查元素样式。

很多时候，问题就出在一个多余的分号或者被覆盖的属性上。

如果实在搞不定，或者项目时间紧，别硬撑。

找专业的人做专业的事，能帮你省下大把时间。

毕竟，你的时间比这几行代码值钱得多。

本文关键词：html居中代码