align-items: center 是表单对齐的第一步，因 label 和 input 默认基线不一致，stretch 会拉伸但视觉错位；设 center 可强制交叉轴居中，是最小干预解法，但需配合高度控制、焦点样式重置及 IE11 兼容处理。
align-items: center 为什么是表单对齐的第一步
因为 label 和 input 默认基线（baseline）不一致：前者是内联文本元素，后者是替换元素（replaced element），浏览器按各自盒模型算高度，align-items: stretch（默认值）会把两者都拉满容器高，但视觉上文字“浮”在 input 上方。直接设 align-items: center 跳过基线对齐逻辑，强制交叉轴居中，是最小干预、最高性价比的解法。
注意：vertical-align 在 flex 容器里完全无效，写了也白写；别把它当救命稻草。
label 高度不固定时，center 可能让文字“飘”起来
当表单混用 input、textarea、select 或带图标的控件时，它们自然高度差异大，align-items: center 会让所有子项垂直中线对齐——但文字本身在 input 内部仍按 line-height 和 padding 布局，结果就是 label 文字看起来“悬空”，不像传统表单那样底部对齐。
- 改用
align-items: flex-start+ 单独给input加align-self: center - 或统一设置
box-sizing: border-box和显式height/line-height，缩小天然差异 - 避免对
label设height，它会破坏换行和响应行为
IE11 下 align-items 不生效？先检查父容器高度
IE11 对 align-items 的实现有 bug：若父容器没明确高度（比如只靠内容撑开），center 经常被忽略。这不是 CSS 写错了，是渲染引擎没“认出”交叉轴范围。
- 给表单行容器加
min-height: 40px（匹配常见 input 行高） - 避免在 IE11 中对单个子项用
align-self，它比align-items更不稳定 - 终极兜底：为 IE11 单独加 class，改用
display: table-cell; vertical-align: middle;
outline 或 border 变化会悄悄破坏对齐
input:focus 时浏览器默认加 outline，它不占布局空间但视觉外扩，会让对齐瞬间“错一像素”；更隐蔽的是某些 reset.css 会在 focus 时增大 border-width，触发重排。
- 重置焦点样式：
input:focus { outline: none; box-shadow: 0 0 0 2px #007bff; } - 若必须保留
outline，加outline-offset: -2px往内收 - 确保所有表单控件用
box-sizing: border-box，避免border变化影响尺寸计算
事情说清了就结束。对齐不是调一次 align-items 就万事大吉，它得和高度控制、焦点行为、兼容性兜底一起看——漏掉任意一环，都可能在某个屏幕或某次聚焦时突然失准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
