place-items: center 对跨行元素无效是因为它仅在被分配的行轨道内对齐，而非整个容器高度；需用 place-content: center 或显式定义轨道高度并配合 align-self: center 实现全局居中。
place-items: center 对跨行元素无效？先确认它是否真在起作用
写了 place-items: center 却发现跨行元素（比如设置了 grid-row: 1 / 3 的子项）没垂直居中，大概率不是属性写错了，而是对齐基准理解偏差。Grid 中的 align-items 和 place-items 控制的是子项在其**被分配到的行轨道内**的对齐，而不是整个容器高度。如果该元素跨两行，那它的“垂直对齐范围”就是这两行合并后的轨道高度，不是父容器总高。
常见误判场景：
- 父容器没设
height或min-height，导致轨道高度为 0，对齐无参照 - 用了
grid-template-rows: auto auto，两行都由内容撑开，轨道高度不固定，align-self: center效果不稳定 - 子元素本身设置了
align-self: start，直接覆盖了place-items
想让跨行元素按容器总高居中？得换对齐目标
要让它真正按父容器整体高度垂直居中，就不能依赖 align-items——它管不了跨行后的“全局位置”。你需要的是控制**网格轨道在容器内的位置**，也就是用 place-content: center。
但注意：place-content: center 生效前提是：容器尺寸 > 网格轨道总尺寸。比如：
立即学习“前端免费学习笔记（深入）”；
- 父容器
height: 500px，而你只定义了grid-template-rows: 100px 100px（总高 200px），多余空间存在，place-content: center才能把这两行轨道整体推到中间 - 若写了
grid-template-rows: 1fr 1fr且父容器有明确高度，则轨道已占满，place-content就没空间可居中了
单个跨行元素精准居中：用 align-self + 显式轨道定义
最可控的方式是放弃批量对齐，直接操作该元素，并确保轨道有明确尺寸：
- 给父容器加上
grid-template-rows: 1fr 1fr或min-height: 100vh，提供稳定对齐基准 - 给跨行元素加
align-self: center（或place-self: center） - 确保它确实是 Grid 容器的**直接子元素**，没被
<div>或 Fragment 包裹 - 如果它还用了
grid-row: 1 / -1（跨所有行），align-self: center会基于所有行合并后的轨道居中，效果接近“容器级居中”
容易被忽略的底层依赖：轨道必须有高度
所有 Grid 垂直对齐行为都依赖轨道（track）有可计算的高度。没有 grid-template-rows、又没内容撑开、也没设 min-height 时，align-self 和 place-items 都找不到对齐起点。这时候加一行 min-height: 100vh 或 grid-template-rows: 1fr，比反复调 justify-content 有用得多。
