place-items: center 是最简方式实现网格子元素水平垂直居中，等价于 justify-items: center 和 align-items: center，使所有直接子项在各自单元格内沿内联轴和块轴居中。
直接说结论：在 display: grid 容器中，place-items: center 是最简方式实现子元素的水平+垂直居中；若只控制单个子项，用 justify-self: center + align-self: center 更精准；而 align-items 只影响所有**非绝对定位**的网格子项在**行方向（block axis）上的对齐**，它不负责“垂直居中”这个常见误解里的“相对于整个容器”，而是相对于各自所在的**网格轨道（grid track）**。
place-items: center 是什么，为什么它能“一键居中”
place-items 是 justify-items 和 align-items 的简写。设为 center 时，等价于：justify-items: center; align-items: center;。它作用于所有直接子元素（grid items），让它们在各自所在单元格内沿**内联轴（justify）和块轴（align）都居中**。
- 适用于单个子元素填满整个网格，或多个子元素都希望“各自居中”（比如图标网格）
- 不需要子元素设
width/height，也不依赖内容尺寸 - 注意：如果父容器没设明确高度（如
height: 100vh或min-height），且子元素无内容撑开，视觉上可能“看不见居中效果”——因为网格容器自身高度塌陷
align-items: center 不等于“让元素在容器里垂直居中”
这是最容易混淆的点。align-items 控制的是所有子项在**各自所处的行（row）轨道内的块轴对齐方式**，不是相对于整个网格容器的高度。
- 当网格只有一行（
grid-template-rows: 1fr），且容器有明确高度时，align-items: center看起来像“垂直居中容器”，其实是子项在那个1fr行轨道里居中 - 当网格有多行（如
grid-template-rows: 100px 1fr 80px），align-items: center会让每个子项分别在自己被分配到的那行轨道里居中，而不是统一按容器总高算 - 若子项设置了
align-self: start，会覆盖align-items的设置
需要单独控制某个子元素？用 justify-self / align-self
当你只想让某一个 grid item 居中，其余保持默认（比如左对齐、顶部对齐），不要动 place-items 或 align-items，直接给那个元素加：
立即学习“前端免费学习笔记（深入）”；
.special-item {
justify-self: center;
align-self: center;
}
- 这比用
margin: auto更可靠（后者在 grid 中仅在某些轨道尺寸下生效） - 支持所有对齐值：
start、end、center、stretch、self-start等 - 注意：如果该子项跨越多行（
grid-row: 1 / 3），align-self: center会让它在这两行组成的合并轨道内垂直居中，不是整个容器
兼容性和 fallback 建议
place-items 和 align-self 在现代浏览器（Chrome 57+、Firefox 52+、Safari 10.1+、Edge 16+）已稳定支持。但如果你必须兼容 IE 或老 Android WebView：
- 避免用
place-items，改用display: flex+justify-content/align-items - 不要依赖
align-self做关键布局，可用margin: auto作为降级（仅当该子项未设grid-row/grid-column跨越时有效） - 检查是否启用了
grid-auto-rows：如果没设，空网格线不会生成轨道，align-items就无处作用
真正容易被忽略的是：网格容器的**尺寸来源**。很多“居中失效”问题，根源不在对齐属性本身，而在父容器高度未定义、或被 min-content 撑开导致轨道高度为 0。先确保 height 或 min-height 存在，再调对齐。
