place-items 能一键居中是因为它是 justify-items 和 align-items 的合并简写，对 grid 直接子项同时设置水平垂直对齐；需满足三前提：父容器 display: grid、子元素为直接子代、未被 place-self 等覆盖。
place-items 为什么能一键居中
因为 place-items 是 justify-items 和 align-items 的合并简写，对 grid 容器内的所有直接子项同时设置水平+垂直对齐方式。只要父容器是 grid 布局，且子元素是 grid item（即直接子代），place-items: center 就能真正“一锤定音”——不用算 margin，不依赖 transform，也不用设 height。
必须满足的三个前提条件
- 父容器要显式声明
display: grid（仅 inline-grid 也行，但行为一致）
- 居中的盒子必须是父容器的**直接子元素**；嵌套一层就失效
- 不能同时设置了
place-self 或单独的 justify-self/align-self 覆盖掉继承值
display: grid（仅 inline-grid 也行，但行为一致）place-self 或单独的 justify-self/align-self 覆盖掉继承值常见翻车现场：div 外层套了 section 或用了 Fragment（React），结果居中的是空容器，真盒子卡在左上角。
和 flex justify-content + align-items 的关键区别
flex 的居中依赖主轴/交叉轴方向，而 grid 的 place-items **完全无视子项的 grid-area、span 或轨道尺寸**，它只管“把内容盒的对齐框塞进其所在网格单元的中心”。这意味着：
- 如果子项设置了
grid-column: 1 / -1占满整行，place-items: center仍会让它水平居中（不是靠左贴边） - 如果父容器只有 1 行 1 列轨道，子项又没设
grid-row/grid-column，它默认落在 (1,1)，此时place-items: center等效于“单元格内居中” - flex 在单行文本或图片上容易因
white-space或vertical-align漂移；grid 不吃这套，更稳定
兼容性与降级建议
place-items 在 Chrome 57+/Firefox 45+/Safari 10.1+ 均支持，IE 完全不认。如果必须兼容旧浏览器：
- 别用
place-items降级为justify-items+align-items——IE 连这两个都不支持 - 老项目稳妥做法：父容器加
display: flex+justify-content: center+align-items: center，再用@supports (display: grid)覆盖 - 注意 Safari 10.0 和 10.1 对
place-items: center的解析有细微差异，建议锁死到 10.1+
真正容易被忽略的是：当父容器设置了 grid-template-areas 且子项用 grid-area 指定了区域时，place-items 依然生效，但它居中的是该区域内的内容盒，不是整个区域本身——这点和很多人直觉相反。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
