margin: auto 水平居中仅对有明确宽度的块级元素有效；flex 布局中 justify-content: center 更通用；text-align: center 仅居中内部行内内容。
margin: auto 水平居中只对块级元素有效
给一个 div 设置 margin: auto 能居中，前提是它有明确的宽度（width），且是块级元素。行内元素（如 span）、行内块（display: inline-block）或没有设宽的块元素，margin: auto 都不会水平居中。
常见错误现象：div 没加 width，结果贴左；或者用了 display: inline 还想靠 margin: auto 居中，完全无效。
- 必须设置
width（可以是固定值、百分比或max-content等） - 不能是
float元素，也不能是绝对定位（position: absolute）——此时margin: auto的行为会失效或变成 0 - 父容器需是常规文档流中的块级上下文（即不是
display: flex或display: grid）
flex 实现居中更通用但要注意父容器设置
用 display: flex + justify-content: center 是目前最稳妥的水平居中方式，适用于任意子元素（文本、图片、按钮、甚至未设宽的 div）。
关键点在于：居中逻辑写在父容器上，不是子元素上。很多人误把 justify-content 加到子元素，结果毫无反应。
立即学习“前端免费学习笔记（深入）”；
