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 加到子元素，结果毫无反应。
立即学习“前端免费学习笔记（深入）”；
- 父元素必须设
display: flex，否则justify-content不生效 -
justify-content: center控制主轴（默认为水平）上的对齐，无需子元素设宽 - 如果父容器本身是行内元素（如
span），要先让它能撑开，比如加display: inline-flex - 注意不要和
align-items混淆——那是控制垂直方向的
inline 元素内部文本/子项居中用 text-align
如果目标是让一个 div 里的文字或 inline 子元素居中，直接在该 div 上设 text-align: center 就够了。这不是“让 div 居中”，而是“让内容在其内部居中”。
这个方法常被误用于试图居中块级子元素——text-align: center 对 display: block 的子元素无效（除非子元素也设成 inline-block）。
- 只影响内部的
inline、inline-block、inline-flex等非块级元素 - 对
display: block子元素无作用，哪怕它没设宽 - 配合
inline-block可以间接实现“伪居中”：子元素设display: inline-block+ 父设text-align: center
别忽略 display 类型切换带来的隐式行为变化
用 flex 后，子元素的 margin: auto 含义会变——它不再只管左右，而是在 flex 容器中可沿主轴/交叉轴“吸边”。例如在 flex-direction: column 下，margin: auto 会让子元素垂直居中。
同样，把一个原本是 block 的元素改成 inline-block，它就不再独占一行，margin: auto 也会失效。这些隐式变化容易在调试时漏掉。