mx-auto不居中是因为元素缺少明确宽度，需配合w-64、max-w-md等宽度类；在flex容器中应改用justify-center；absolute定位下须同时设置宽高和relative父容器。
margin: 0 auto 在 Tailwind 中不居中，是因为元素没显式宽度
Tailwind 的 mx-auto 或 my-auto 不是魔法开关，它本质就是 CSS 的 margin-left: auto; margin-right: auto;。浏览器只有在块级元素有**明确宽度**（非 auto、非 100%、非 fit-content）时，才会把剩余水平空间均分给左右 margin。
常见错误现象：div 加了 mx-auto 却靠左贴边；或用 text-center 误以为是 margin 居中生效了。
- 必须加宽度类，比如
w-64、max-w-md、sm:w-1/2（百分比在父容器有宽时才可靠） - 避免用
w-full—— 宽度等于父容器，无“剩余空间”可分配 - 若子元素是
inline类型（如span），需先加block或inline-block，否则mx-auto直接被忽略 - 父容器不能是
flex或grid—— 这些会覆盖块级流行为，mx-auto退化为仅在 flex item 内部起交叉轴作用（见下一条）
在 flex 容器里 mx-auto 失效，其实是它根本没想管水平方向
Tailwind 的 mx-auto 在 flex 父容器中表现和常规文档流完全不同：它只在**交叉轴**上生效。也就是说，mx-auto 是否起作用，取决于 flex-direction。
典型误操作：flex flex-row 容器里给子项加 mx-auto，结果毫无反应——因为此时主轴是水平，mx-auto 被 flex 布局引擎解释为“吞掉交叉轴（即垂直方向）的剩余空间”，对左右位置完全没影响。
-
flex flex-row→ 想水平居中目标子项，该用justify-center（在容器上），不是给子项加mx-auto -
flex flex-col→ 此时mx-auto才真正在水平方向生效（因为交叉轴变成 X 轴） - 多个子项都加
mx-auto会互相挤压，行为不可控；应只对单个目标项设置 - 若子项宽度撑满（如
w-full），即使加了mx-auto，也因无剩余空间而失效
absolute + inset-0 + mx-auto 不居中，缺了最关键的 width/height
Tailwind 的 absolute inset-0 mx-auto 看似简洁，但几乎必然失效——因为 mx-auto（以及 my-auto）在绝对定位下垂直居中生效的前提，是同时满足三个硬性条件：四边归零、宽高固定、父容器有定位上下文。
常见错误现象：遮罩层内容偏上、模态框高度塌缩、图标卡在左上角。
- 必须补全
top-0 right-0 bottom-0 left-0（inset-0是简写，没问题） - 必须显式设宽高，例如
w-80 h-64；w-full h-full不行，max-w-md单独也不行（缺少 height） - 父容器必须有
relative（或其他非static的position），否则定位基准错乱 - 更推荐替代方案：
top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2，不要求宽高固定，也不依赖四边归零
为什么你检查了所有条件还是不居中？大概率是父容器高度为 0
尤其在 flex 或 grid 布局中，items-center 或 place-items-center 看似写了，但子项就是不垂直居中——根本原因常是父容器没有实际高度。
块级容器默认 height: auto，若内部全是浮动、绝对定位或空内容，它的计算高度就是 0，垂直居中自然失去参照基准。
- 加
min-h-screen、h-screen、h-96等显式高度类是最直接验证方式 - 用
border类（如border border-red-500）快速观察父容器是否真实渲染出高度 - Flex 容器中，
items-center只控制交叉轴对齐，不负责撑高；若子项本身没内容或高度为 0，整个容器仍可能塌陷 - 响应式场景下，
sm:items-center在小屏可能被覆盖，注意断点类优先级
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
