优先用 display: flex 包裹每组 label + input，设 align-items: center 可强制垂直居中对齐，避免 baseline 天然错位；若用 inline 布局，则 label 和 input 均需设 display: inline-block 与 vertical-align: middle，并统一 font-family 和 font-size。
label 和 input 垂直对齐不齐，根本不是 margin 没加够
label 和 input 默认按 baseline 对齐，但它们的 baseline 位置不同：label 的 baseline 在文字底边，input 的 baseline 实际在框体中间偏下——天然错位。直接调 margin-top 或 padding-bottom 只是掩盖问题，还会在缩放、换字体、iOS Safari 下反复出错。
实操建议：
- 优先用
display: flex包裹每组label+input，一句align-items: center就覆盖掉 baseline 计算逻辑 - 若必须用 inline 布局，必须同时设
label { display: inline-block; vertical-align: middle; }和input { vertical-align: middle; }，缺一不可 - 别给
label单独加line-height或font-size而不同步到input，否则基线偏移会放大
flex 布局下 align-items: center 为什么还失效
align-items: center 只作用于 flex 容器的**直接子元素**，且只在交叉轴（默认为垂直方向）生效。一旦中间混入 float、position: absolute 或未声明 display: inline-block 的内联元素，对齐就断了。
常见翻车点：
立即学习“前端免费学习笔记（深入）”；
-
label或input外层有span或div且没设display: contents，它就变成了 flex 子项，但内容不参与对齐 - 用了
gap但父容器高度不够，导致align-items: center没参考空间 - IE10/11 中，若
input有min-height，可能被压缩；加flex-shrink: 0更稳
inline 布局下 vertical-align: middle 怎么写才真有效
vertical-align: middle 仅对 display 为 inline、inline-block、table-cell 的元素生效。默认 label 是 inline，input 是 inline，但浏览器对它们的 baseline 推算规则不同，所以单写 vertical-align: middle 很可能被忽略或效果漂移。
要让它起效，必须：
- 显式设
label { display: inline-block; }和input { display: inline-block; } - 确保父容器没有干扰性的
line-height（比如设成line-height: normal） - 统一字体环境：
input必须继承label的font-family和font-size，否则 x-height 不一致，中线还是错的 - iOS Safari 对
label点击热区有偏差，建议加cursor: pointer和min-height: 1.2em
表格里 label 和 input 对齐要不要用 table 布局
不要。用 display: table 模拟表格布局虽兼容旧浏览器，但会退化语义、破坏响应式、缩放时易错位。现代项目中，display: flex 的代码量不比 table 多，且缩放稳定、移动端适配自然。
例外场景仅限：
- 内网系统必须支持 IE8–IE10，且表单结构固定不变
- 已有大量 legacy table 表单，短期无法重构
即便如此，也应把 display: table 限制在单行容器内，而非整个表单——避免影响整体流式布局。
