align-items: center 在 css grid 中仅对直接子元素生效且需容器有明确高度；无效常见原因包括未设 display: grid、容器高度为 auto、控件非直接子元素；place-items: center 是其简写，行为相同；subgrid 中 align-items 无效，需用轨道控制。
align-items: center 在 CSS Grid 中能实现表单控件的垂直居中，但**只对直接子元素生效，且依赖容器有明确高度**。写上这行样式却没效果？八成是漏了 display: grid 或容器高度为 auto。
为什么 align-items: center 没反应
常见错误现象：表单容器加了 align-items: center，但 input、label 依然贴着顶部；审查元素发现容器高度只有几像素。
- 父容器没设
display: grid—— 这个属性只在 Grid 布局下起作用，纯div上写它等于没写 - 容器高度未定义：没设
height、min-height，也没被内容撑开，导致交叉轴长度为 0，无处可“居中” - 表单控件不是直接子元素：比如套了一层
div.form-row，那align-items只控制.form-row的位置，不穿透到内部input
表单控件垂直居中的正确写法
目标是让每个 input、select、button 在各自网格单元内上下居中，而不是让整个表单块居中。
- 给表单容器设
display: grid和明确高度约束（如min-height: 40px或height: fit-content） - 确保
input等控件是容器的**直接子元素**；如果不是，就别指望align-items能管到它们 - 若需兼容老浏览器（如 IE11），
align-items不可用，得改用display: flex套一层或绝对定位 - 多列布局中，
align-items: center会让所有列的控件统一按同一基准线对齐——这点比 flex 的baseline更稳定
和 place-items: center 的区别在哪
place-items: center 是 align-items: center 和 justify-items: center 的简写，但它**不会改变对齐粒度**：仍只作用于直接子元素，仍要求容器有可计算的高度。
- 写
place-items: center更简洁，但行为和分开写一样，别以为它能“自动深入嵌套” - 如果表单里某个字段带图标+文字组合，而你希望这个组合整体居中，就得让那个组合容器自己设
display: flex; align-items: center -
place-items在 Safari 10.1+、Chrome 57+、Firefox 52+ 支持良好，但不支持 IE —— 如果项目还跑在 IE11 上，它会被完全忽略
真正要小心的是 subgrid 场景
当表单用了 display: subgrid（比如多列输入框共用行轨道），align-items 的行为会变：subgrid 容器不创建新格式化上下文，它的 align-items 会继承自父级 grid，不能单独设置。
- 此时不要试图在 subgrid 子项上加
align-items，它无效 - 垂直对齐得靠父 grid 的轨道定义 + 子项的
grid-row-start锚定（例如固定input在第二行） - 也就是说，一旦引入 subgrid，
align-items: center就退场了，换轨道控制逻辑
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
