align-content在grid中仅对多行轨道间的空隙生效，需容器有明确交叉轴尺寸且至少两行轨道；单行垂直居中应使用align-items并确保容器有可测量高度。
align-content 在 Grid 中根本不管“单个子项”的对齐，只管“多行轨道之间的空隙”；想让单行内容垂直居中，必须用 align-items，且容器得有可测量高度。
align-content 为什么写了却没反应？
它只在两个条件同时满足时才参与布局计算：
- 容器设置了明确的交叉轴尺寸（比如
height或min-height），且该尺寸 > 所有行轨道高度之和 - 实际存在**至少两行网格轨道**（
grid-template-rows显式定义了多行，或子项数量触发了隐式行生成）
常见错误现象：align-content: center 写了但内容还是贴顶——大概率是只有一行，或者容器 height: auto 导致剩余空间为 0。打开浏览器 Grid overlay（Elements → Styles 面板点 grid 图标），看横线是不是只有一条：只有一条，align-content 就完全不工作。
align-items 才是单行内容垂直居中的主力
它控制的是每个网格项（grid item）在其所在网格区域内的交叉轴对齐方式，无论单行还是多行都生效。但它有个硬前提：
- 容器必须是
display: grid - 容器在交叉轴方向要有可测量高度（
height、min-height，或被父容器约束） - 子项本身不能是
height: 0或visibility: hidden等导致无渲染尺寸的状态
例如：.container { display: grid; height: 300px; align-items: center; } —— 这会让所有子项在其各自单元格内垂直居中。但如果子项内部是文字+图片混排，align-items 只对整个单元格盒子起作用，不会调整内部基线，这时候错位往往来自 line-height 或 vertical-align。
Grid 中没有 align-content 的 Flex 式“换行”逻辑
Flex 的 align-content 依赖 flex-wrap 和内容是否实际换行；Grid 没有“换行”概念，它的行数由 grid-template-rows（显式）或子项数量 + grid-auto-rows（隐式）决定。所以：
-
align-content在 Grid 中只响应“轨道数量”，不响应“内容溢出” - 即使子项很多、视觉上挤成多行，只要网格只生成了一行轨道（比如只写了
grid-template-rows: 100px），align-content依然无效 - 要强制多行，得写
grid-template-rows: repeat(2, 100px)或留空让grid-auto-rows生效
真正容易被忽略的地方是：align-content 的“content”指的不是子项内容，而是网格轨道（grid rows）组成的那个“行组”。它不碰子项，也不碰子项里的文字图片——那部分得靠 align-items、justify-items，甚至 vertical-align 去调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
