align-items: center必须设置在grid容器上才能使子元素在交叉轴（默认垂直方向）居中，它控制所有直接子项对齐，单个子项可用align-self覆盖；注意与justify-items（主轴/水平）区分，并排查display: grid缺失、样式覆盖或子元素高度撑满等问题。

grid 容器上必须设置 align-items: center

只给子元素加 align-items 没用，这个属性属于网格容器（父元素），控制所有直接子项在交叉轴（默认是垂直方向）的对齐方式。

div.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center; /* ✅ 必须写在这里 */
}

如果容器高度固定（比如 height: 300px），效果会更明显；若容器高度由内容撑开，可能看不出“居中”变化，因为交叉轴长度等于内容高度。

注意 align-items 和 justify-items 的方向区别

align-items 管垂直（交叉轴），justify-items 管水平（主轴）。别记混：

• 默认 grid-auto-flow: row → 主轴水平，交叉轴垂直
• 所以 align-items: center = 垂直居中，justify-items: center = 水平居中
• 如果改成 grid-auto-flow: column，两者作用方向会互换

单个网格项想单独垂直居中？用 align-self

当某个格子需要和其他不一样，比如第三列文字要顶着顶部、其余居中，就不用动容器，直接在那个子元素上设：

.special-item {
  align-self: start; /* 覆盖容器的 align-items */
}

• align-self 可取值和 align-items 一致：start / center / end / stretch
• 设为 auto（默认）则继承容器的 align-items
• 仅对直接子元素生效，嵌套后代无效

如果内容没居中，先检查这三件事

• 确认父元素确实用了 display: grid（不是 flex 或其他）
• 确认没有其他 CSS 覆盖了 align-items，比如从重置样式表或组件库带进来的 align-items: stretch
• 检查子元素是否设置了 height 或 min-height，导致自身高度撑满，视觉上“没动”——可临时加 background: pink 看实际占位

真正卡住的时候，往往

不是语法错，而是容器高度不可见、或者被其他规则悄悄覆盖了。