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看实际占位
