在CSS网格布局中，align-content 用于控制多行网格轨道（grid tracks）在容器的交叉轴（cross axis）上的对齐方式。当网格容器有多余空间，并且网格行的总高度小于容器高度时，align-content 就会起作用。
适用场景：多行网格布局
align-content 只在以下情况生效：
- 网格容器中有多行（即多个
grid-row） - 所有行的高度总和小于网格容器的高度
- 使用了
grid-auto-rows或显式定义了行高
如果只有一行，或行高占满容器，则 align-content 不会产生效果。
常用属性值说明
align-content 支持多个对齐值：
立即学习“前端免费学习笔记（深入）”；
- start：行向容器顶部对齐（默认行为）
- end：行向容器底部对齐
- center：行整体居中排列
- space-between：行之间等距分布，首尾行贴边
- space-around：每行周围分配相等空间
- space-evenly：所有行之间的间隔完全相等
- stretch：行拉伸以填满容器（前提是行高未固定）
实际代码示例
下面是一个使用 align-content: center 的例子：
免费 盛世企业网站管理系统(SnSee)系统完全免费使用，无任何功能模块使用限制，在使用过程中如遇到相关问题可以去官方论坛参与讨论。开源 系统Web代码完全开源，在您使用过程中可以根据自已实际情况加以调整或修改，完全可以满足您的需求。强大且灵活 独创的多语言功能，可以直接在后台自由设定语言版本，其语言版本不限数量，可根据自已需要进行任意设置；系统各模块可在后台自由设置及开启；强大且适用的后台管理支
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 80px; /* 每行高80px */
gap: 10px;
height: 400px; /* 容器高度大于内容总高度 */
align-content: center; /* 多出行在垂直方向居中 */
}
.item {
background: lightblue;
}
在这个例子中，假设有4行内容，总高度为 4×80 + 3×10 = 350px，而容器是400px，多出的50px空间会被 align-content: center 均匀分配到上下两侧。
与 align-items 的区别
align-items 控制的是单个网格项在其单元格内的对齐方式，而 align-content 控制的是整行网格轨道之间的对齐和分布。
如果行高是固定的，align-content 决定这些行如何分布在容器中；如果行高可拉伸（如使用 minmax()），stretch 值会让行自动扩展。
基本上就这些。只要记住：多行 + 有剩余空间 + 设置对齐方式，就能用上 align-content。不复杂但容易忽略。
