place-items 是 css grid 专用简写属性，用于同时设置 justify-items 和 align-items，仅在 display: grid 容器上生效，控制直接子项在网格单元格内的对齐，不适用于 flex 或普通块级布局。
place-items 是 CSS Grid 的简写属性，用来同时设置 justify-items 和 align-items，专为网格容器内所有直接子项（grid items）的对齐服务。它不是通用居中方案，只在 display: grid 容器上生效。
place-items: center 只对 grid 子项起作用
很多人误以为加了 place-items: center 就能“让任意内容居中”，结果发现没反应——大概率是因为父容器没设 display: grid，或者目标元素不是它的直接子项。
- 必须先写
display: grid，否则place-items完全被忽略 - 只影响直接子元素；如果中间嵌套了一层
div，那最里层的文字不会被居中 - 不改变文档流，也不依赖子元素宽高，这点比
margin: auto更鲁棒
和 flex 的 justify-content + align-items 有本质区别
place-items 控制的是“网格区域内的单元格对齐”，而 flex 的两个属性控制的是“弹性主轴与交叉轴上的项目排列”。表现相似，但底层逻辑不同：
-
place-items: center在单列单行网格里看起来像居中，但如果定义了多行（比如grid-template-rows: 1fr 1fr），它会让每个子项在各自网格单元格里居中，不是整个容器中心 - 没有显式网格轨道（如没写
grid-template-rows或grid-template-columns）时，浏览器会生成隐式轨道，此时place-items行为稳定，可放心用 - IE 完全不支持
place-items，grid本身也无兼容性可言，别在需要支持 IE 的项目里用
常见翻车点：父容器没高度，或子元素撑不开网格
即使写了 display: grid; place-items: center，内容也可能“卡在顶部”——这不是 place-items 失效，而是网格容器自身高度为 0 或由内容撑开，导致垂直方向没空间可居中。
- 若想垂直居中，父容器必须有明确高度（如
height: 100vh、min-height: 200px） - 子元素是空
div或纯文本时，容易因无内容/无高度而“看不见居中效果”，建议临时加background或border观察 - 避免同时给父容器设
display: grid和display: flex，后者会覆盖前者，place-items直接失效
真正要用好 place-items，得接受它是 Grid 体系里的“单元格内对齐工具”，不是万能居中开关。它简洁，但上下文约束强；写错一行 CSS（比如漏了 display: grid），就彻底静默失效，连报错都没有。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
