align-items: center 不生效的主因是容器未设 display: grid/inline-grid；需确保父容器有明确高度，且无更高优先级样式覆盖，单个子项居中应改用 align-self: center。
align-items: center 不生效的常见原因
直接写 align-items: center 却没效果，大概率不是语法错，而是容器没满足“网格容器”前提。CSS Grid 的对齐能力只在真正启用 Grid 布局后才激活——也就是说，display 必须是 grid 或 inline-grid，仅靠父元素有子项、或写了 grid-template-columns 但没设 display，align-items 就是摆设。
- 检查父容器是否设置了
display: grid（或inline-grid） - 确认没有被其他 CSS 覆盖，比如某处写了
align-items: start且优先级更高 - 注意：Flexbox 的
align-items和 Grid 的同名属性行为一致，但作用域不同；混用时别误以为 Flex 容器里的 Grid 子项能继承对齐规则
网格容器中单个子项垂直居中的正确写法
只要容器是 display: grid，align-items: center 就会把所有直接子项在交叉轴（默认为块方向，即垂直方向）上居中。不需要额外设置 justify-items 或行高 hack。
div.container {
display: grid;
align-items: center;
height: 300px; /* 需要有明确高度，否则“垂直居中”无参照 */
}关键点：
-
height（或min-height）必须可计算，否则容器高度塌缩，居中失去意义 - 如果只希望某个特定子项居中，而不是全部，就别用
align-items，改用align-self: center在该子项上单独设置 - 网格轨道本身（如
grid-template-rows）未定义时，浏览器会按内容自动分配行高，此时align-items仍有效，但视觉效果可能不如显式定义行高稳定
和 justify-content / justify-items 混用时的误区
align-items 管垂直（交叉轴），justify-content 管水平（主轴）。Grid 默认主轴是行方向（grid-template-columns 所在轴），所以 justify-content: center 是水平居中，不影响垂直。
立即学习“前端免费学习笔记（深入）”；
- 想让整个网格内容区在容器内居中？用
justify-content: center+align-content: center（后者针对多行网格轨道） - 想让每个格子内部内容居中？那得看子项自身是不是 Flex/Grid 容器——
align-items不会穿透到孙级元素 -
align-items和align-content容易混淆：align-content只在网格容器有多行轨道（即grid-template-rows多值或自动换行）且容器高度富余时才起作用
替代方案：当 align-items 真的不能用时
比如容器是 display: block，但你又不想改布局模型；或者需要兼容老版本 Safari（align-items 在 Grid 中曾有 bug）。这时可退回到基于 place-items 或绝对定位 + transform：
.fallback-center {
position: relative;
}
.fallback-center > * {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}但要注意：
- 绝对定位会让子项脱离文档流，可能影响其他兄弟元素布局
-
place-items: center是justify-items和align-items的简写，仅在 Grid/Flex 容器中有效，不是万能兜底 - 若容器高度动态（如由内容撑开），绝对定位反而更难控制，此时宁可强制加
min-height并坚持用align-items
实际项目里最常被忽略的，是忘了给网格容器设一个可测量的高度，或者误以为 align-items 能影响嵌套三层深的按钮图标对齐。
