place-items: center失效的首要原因是父容器未设display: grid或inline-grid；它仅对Grid容器的直接子元素生效，且需容器有明确高度空间。
父容器没设 display: grid
浏览器完全忽略 place-items: center，不报错也不生效，只因它根本不是 Grid 容器。常见写法错误包括：place-items-center 类名单独存在、或父元素只写了 grid-cols-1 却没启用 display: grid（Tailwind 默认需显式配置 grid 插件）。打开开发者工具看 computed styles，如果 display 是 block 或 inline，那就直接卡在这一步。
父容器高度塌陷，没空间可居中
place-items: center 不是“把元素扔到屏幕中央”，而是让子项在网格单元格内居中——前提是单元格有高度。若父容器 height: auto 且内部无内容撑开，computed height 就是 0px，垂直方向自然没参照。
- 全屏场景优先用
min-height: 100vh，比height: 100vh更稳（避免 iOS 键盘弹出时视口缩放） - 嵌套场景检查父级是否加了
overflow: hidden、flex: 0 0 auto或max-height，这些都可能截断高度传递 - HTML 和 body 默认不占满视口，记得补上：
html, body { height: 100%; margin: 0; }
子元素不是直接子代，或被脱离文档流
place-items 只对 Grid 容器的**直接子元素**生效。React 中的 <Fragment>、Vue 的 <template>、或随手包的一层 <div>，都会让目标元素变成“孙元素”，属性失效。
- 用开发者工具选中目标元素，往上逐级看
display值，确认它父级确实是grid - 若无法删包裹层，可用
display: contents让中间层“透过去”（注意：IE 不支持，Safari ≤15.4 有兼容问题） -
position: absolute、float或display: none会让元素脱离网格项身份，place-items对它彻底失能
误用了 place-content 或混搭了其他对齐属性
place-content: center 和 place-items: center 完全不同：前者对齐的是整个网格轨道块（比如三行内容在 500px 高容器里居中），后者对齐的是每个子项在各自单元格里的位置。两者混用不仅无效，还可能相互覆盖。
立即学习“前端免费学习笔记（深入）”；
- 单个子元素居中，别用
place-items批量控制——改用place-self: center写在该元素上 - 想让整块网格（如
grid-template-columns: repeat(3, 100px)）在容器中居中，才该用place-content: center，且必须保证容器尺寸 > 轨道总尺寸 - Flex 父容器里嵌 Grid 子容器时，
align-items: flex-start可能压制 Grid 的垂直空间分配，导致子容器拿不到足够高度
place-items: center 背后那两个沉默的前提：父容器得是 grid，还得有真实可用的高度空间——这两点不满足，再写十遍也白搭。 
