Flex居中需父容器同时设display: flex、justify-content: center和align-items: center，且必须有可计算高度（如min-height: 100vh），否则交叉轴无空间导致视觉上“失效”；子元素不能脱离文档流，inline元素需转为block。
flex items-center justify-center 为什么没反应
因为父容器没开 flex 布局，也没设高度。items-center 和 justify-center 是 flex 专用指令，单独加在普通 div 上完全无效——浏览器压根不解析这些类。更常见的是父容器高度为 auto（默认行为），哪怕开了 flex，没空间可分配，居中也“看不见”。
- 必须同时加
flex、items-center、justify-center，三个类写在同一父元素上 - 父容器得有明确高度，比如
h-screen、min-h-screen或h-96 - 别把
flex和对齐类拆到不同层级，子元素上加items-center没用 - 如果子元素是
span这类 inline 元素，先加block或inline-block，否则对齐行为不可控
place-items-center 能不能直接替代
能，但要注意兼容性和作用范围。place-items-center 是 justify-items-center items-center 的简写，在 flex 容器里效果等同于 justify-center items-center，写起来少两个词。但它在 grid 和 flex 下都生效，而你可能只想要 flex 行为。
- Tailwind 3.0+ 才支持，旧项目用不了
- 它对 grid 容器也生效，如果父容器意外用了
grid，结果可能和预期不符 - 它不解决高度问题——
place-items-center同样需要父容器有高度，否则还是塌缩 - 如果你已经习惯
flex justify-center items-center，没必要换；新项目想简洁可试grid place-items-center，语义更清晰
绝对定位方式怎么写才不踩坑
用 absolute + inset-0 + flex items-center justify-center 是安全做法，比手动算 top-1/2 translate-y-1/2 更稳。很多人直接套 top-1/2 left-1/2 translate-x-1/2 translate-y-1/2，结果发现子元素宽高变化时偏移错位。
- 父容器必须加
relative，否则absolute子元素会相对于视口定位 - 推荐写法：
relative父容器 +absolute inset-0子容器 +flex items-center justify-center再包一层内容 -
inset-0等价于top-0 right-0 bottom-0 left-0，确保子容器铺满父级，再用 flex 居中，逻辑更正交 - 避免在子元素上直接用
translate类，它依赖自身尺寸；flex 居中不依赖尺寸，适应性更强
为什么 mx-auto + my-auto 不行
mx-auto 只在正常流块级元素上生效，my-auto 在非 flex/grid 容器里根本不起垂直居中作用。这是最常见的误解：以为加了 my-auto 就能像 mx-auto 那样自动分配上下 margin。
立即学习“前端免费学习笔记（深入）”；
-
my-auto只对 flex 或 grid 容器里的子元素有效，且需配合主轴/交叉轴方向设置 - 纯块级流布局中，
my-auto等同于margin-top: auto; margin-bottom: auto，但块级元素在文档流里无法靠 margin 实现垂直居中 - 如果只是想让单个卡片水平居中，
mx-auto配合w-64或max-w-md就够了；要垂直，必须切换布局上下文 - 响应式场景下，
mx-auto配max-w-类更自然；复杂对齐优先选 flex/grid
