align-items: center 在 grid 中生效需父容器同时声明 display: grid 和 align-items: center；它控制网格单元内子项在交叉轴（默认y轴）的垂直居中，不作用于嵌套flex内部，且受subgrid继承限制。
align-items: center 在 grid 容器里为什么没效果
常见错误是把 align-items: center 加在了子元素上，或者父容器根本不是 grid。它只对直接子元素生效，且父级必须声明 display: grid 或 display: inline-grid。
真正起作用的前提只有两个：display: grid + align-items: center 同时存在于父级规则中。别信“加了就该居中”的直觉——CSS 不会自动推导布局上下文。
- 检查父级是否漏写了
display: grid（仅写align-items无效） - 确认没有其他规则覆盖，比如子元素设置了
align-self: start - 如果用了
grid-template-areas，但某区域没内容，空白格不参与对齐计算
grid 中 align-items 和 justify-items 的区别在哪
align-items 控制的是**行内方向的垂直对齐**（即 cross axis），在 grid 里默认是 y 轴；justify-items 控制的是**行内方向的水平对齐**（即 inline axis），默认是 x 轴。这和 flexbox 刚好相反，容易记混。
实际效果取决于 grid-auto-flow 和显式轨道定义：
立即学习“前端免费学习笔记（深入）”；
- 用
grid-template-rows显式设了高度，align-items: center才有空间可居中 - 若所有行都是
auto且子项没撑开容器，视觉上可能看不出变化 -
justify-items: center对单列 grid 效果明显，多列时每个格子内部水平居中，不是整行居中
子元素是 flex 容器时，align-items: center 还管用吗
管用，但只管 grid 网格线之间的对齐，不管子元素内部怎么排。也就是说：grid 层的 align-items: center 把整个 flex 子项在网格单元里垂直居中了，但它不干涉这个 flex 子项自己内部的 align-items 或 justify-content。
典型踩坑场景：子项是 display: flex，又同时设了 height: 100%，结果内容贴顶——因为 flex 默认 align-items: stretch，而 grid 的居中没传下去。
- 如果想让 flex 子项的内容也居中，得在子项上额外加
align-items: center - 不要依赖 grid 的对齐去“穿透”控制嵌套容器的内部布局
- 高度未定义时，
height: 100%在 grid 单元里可能解析为 0，建议用min-height: 0配合
兼容性与 display: subgrid 的干扰
align-items: center 在 grid 中支持度很好（Chrome 57+、Firefox 52+、Safari 10.1+），但遇到 display: subgrid 就得小心：subgrid 容器本身不创建新的格式化上下文，它的 align-items 会继承自父 grid，不能单独设置。
如果你在子 grid（subgrid）上写了 align-items: center，现代浏览器会直接忽略——这不是 bug，是规范行为。
- subgrid 的对齐完全由父级 grid 的
align-items和justify-items决定 - 需要局部调整时，只能回到子项上用
align-self或justify-self - IE 完全不支持 grid，任何
align-items在 grid 上都无效，别试图降级兼容
