align-items控制网格项在各自单元格内沿块轴的对齐方式，其默认值stretch常被误认为失效，实则因容器无明确高度、子项设height/min-height或align-self覆盖所致；它不调整网格线也不居中容器。

align-items 控制的是网格项在**各自单元格内沿块轴（通常是垂直方向）的对齐方式**，不是让整个网格容器居中，也不是调整网格线位置 —— 它只影响内容在已分配轨道内的“摆放姿势”。

为什么 align-items 看起来没生效？

最常见的原因是它默认值是 stretch，而你没意识到这已经“生效”了：项目被拉伸填满整行高度。如果你给项目设了 height 或 min-height，且该值大于轨道高度，stretch 就会失效，此时才可能看到 start 或 center 的效果。

• 轨道高度由 grid-template-rows 或 grid-auto-rows 决定，不是父容器高度
• align-items: center 是在“该行轨道高度”内居中，不是相对于视口或父容器
• 如果某项目设置了 align-self，align-items 对它完全无效

align-items 常用取值与实际表现差异

取值看似简单，但行为受内容类型和尺寸约束影响明显：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• start：对齐到单元格顶部（LTR/TTB 模式下），但如果项目是 flex 容器或含 display: inline 内容，基线可能偏移
• center：严格按轨道高度居中，哪怕内容只有 1 行文字，也会上下留白
• baseline：需要项目内有可参与基线对齐的内联内容（如文本），否则退回到 start
• stretch：忽略项目自身的 height，但尊重 max-height 和 min-height

和 margin: auto、align-self 的优先级怎么算？

三者共存时，顺序是：margin: auto > align-self > align-items。也就是说：

• 在 Grid 中，margin: auto 依然有效，且能突破轨道限制实现真正居中（即使轨道高度不一致）
• align-self: unset 不是“恢复默认”，而是放弃继承，走浏览器初始值（即 stretch）
• 若同时写了 align-self: center 和 margin-top: auto; margin-bottom: auto，后者胜出

真正容易被忽略的点在于：align-items 只对**网格项**起作用 —— 如果子元素被设了 display: contents 或不是直接子元素（比如套了一层 div 但没声明为 grid item），它就完全不生效。