place-items: center 无反应最常见原因是父容器未设 display: grid/inline-grid；其次为子元素脱离文档流、父容器高度塌陷、误用 place-content 或多子元素重叠；需确保宽高明确且兼容性达标。
place-items: center 为什么没反应
最常见原因是父容器根本不是 Grid 容器——place-items 只对 display: grid 或 display: inline-grid 的元素生效，写在普通 div 上等于没写。浏览器不会报错，但 computed styles 里也看不到它起效。
- 检查父元素是否真有
display: grid（哪怕没写grid-template-rows或grid-template-columns） - React/Vue 中容易因 Fragment、多余 wrapper
div导致目标子元素不是直接子代，place-items对它无效 - 子元素设了
position: absolute或float—— 这些会让它脱离 Grid 布局流，对齐失效 - 父容器高度塌陷：若没设
min-height或height，且子元素又不撑高，computed height 就是 0px，居中自然“看不见”
容器必须有明确宽高才能生效
place-items: center 不是魔法，它依赖网格轨道的可用空间。交叉轴（默认 y 轴）没有可参考长度时，垂直居中就无从谈起。
- 全屏场景优先用
min-height: 100vh，比height: 100vh更安全（避免 iOS 键盘弹出时视口高度突变） - 嵌套布局中，确保父容器（甚至
html和body）有height: 100%或min-height，且未被overflow: hidden或flex: 0 0 auto截断 - 临时加
background: #f0f到容器上，看色块是否铺满你预期的区域——这是最快定位塌陷的方法
place-items: center vs place-content: center
这两个属性作用对象完全不同，混用或误用是高频翻车点。
-
place-items: center控制的是**每个子元素在其分配到的网格单元格内**如何对齐（即子项的对齐盒） -
place-content: center控制的是**整套网格轨道（rows/columns）在容器内的位置**，影响的是行与列整体的偏移 - 单个子元素 + 无显式网格划分 →
place-items: center足够 - 多行多列组成的网格块需要整体居中（比如一个 3×3 图标网格要居中显示在页面上）→ 改用
place-content: center
只想居中一个子元素，别用 place-items
place-items 是容器级批量控制属性，一开就是全开。多个子元素会重叠在中心点，不是你想要的效果。
- 精准控制单个子项：直接给它加
place-self: center，等价于justify-self: center; align-self: center; - 如果该子元素跨多行（如
grid-row: 1 / 3），align-self: center会让它在这两行合并后的轨道内居中，不是整个容器高度 - 注意兼容性：Safari 10.1+、Chrome 57+、Firefox 45+ 支持
place-items；IE 完全不支持；旧版 Safari（≤10）有 bug，建议降级为显式写justify-items: center; align-items: center;
place-items: center 写错，而是忘了它背后那两个沉默的前提：容器得有宽，也得有高。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
