必须为父容器设置 display: grid 或 inline-grid 才能使 align-items: center 生效；它仅作用于直接子元素在交叉轴的对齐，且容器需有明确高度（如 min-height: 100vh）才能体现居中效果。
grid 容器必须设为 display: grid
只写 align-items: center 没用，前提是父容器已启用 Grid 布局。如果忘了加 display: grid 或 display: inline-grid，这个属性会被浏览器完全忽略。
常见错误场景：给一个
加了
align-items: center，但子元素还是顶着顶部对齐——大概率是没设 display。
- 必须显式声明
display: grid（或inline-grid） - 不需要定义
grid-template-rows或grid-template-columns也能生效，空网格也支持align-items - 如果用了
grid-template-areas，align-items依然作用于整个容器的行方向（即所有轨道组成的整体高度）
align-items: center 只作用于直接子元素
align-items 控制的是网格容器内「所有网格项」在交叉轴（默认为块方向，即垂直方向）上的对齐方式，但它不递归影响孙子元素。
比如你有一个 div.grid 包着一个 div.card，而 .card 里还有文字和按钮——align-items: center 只会让 .card 在网格里垂直居中，不会让 .card 内部的内容也居中。
立即学习“前端免费学习笔记（深入）”；
- 想让内部内容也居中，得在
.card上单独设置display: flex+align-items: center，或者用display: grid+place-items: center - 注意：不要误以为
align-items是“全局垂直居中神器”，它只管一层
容器高度不确定时，align-items 可能没效果
如果网格容器自身没有明确高度（比如没设 height、min-height，且内容没撑开它），那么它的交叉轴长度可能为 0，此时 align-items: center 实际无处可居中。
典型表现：元素看起来还是贴着顶部，审查元素发现容器高度只有几像素。
- 解决方法之一：给容器加
min-height: 100vh（适合全屏居中） - 或用
height: 100%配合父级有明确高度（需确保整条继承链高度可计算） - 更稳妥的做法：配合
place-content: center（同时控制主轴+交叉轴），但前提是容器尺寸可测量
/* 示例：可靠居中一个卡片 */ .container { display: grid; place-items: center; min-height: 100vh; } .card { padding: 24px; background: #fff; border-radius: 8px; }真正容易被忽略的是：Grid 的对齐能力依赖容器自身的尺寸上下文。没高度，再准的 align-items 也落不了地。