最稳起点是align-items: center，因label与input基线天然不一致，baseline在分离结构下不可靠；需同容器包裹、禁用vertical-align，并配合box-sizing、line-height等统一控制。
用 align-items: center 统一垂直居中是最稳的起点
别纠结 baseline 对齐逻辑——label 是内联文本，input 是替换元素，它们的基线天然不一致，align-items: baseline 在分离结构下基本不可靠。直接设 align-items: center 跳过基线计算，强制所有子项按交叉轴中点对齐，视觉上干净、行为可预测。
注意：这个值只在父容器有明确高度或内容撑开时才稳定生效；IE11 需要额外加 min-height（比如 min-height: 40px），否则可能忽略该声明。
- 必须把
label和input包在同一个子容器里（如<div class="form-row">），不能让它们作为 flex 直接子元素并列 <li> <code>vertical-align在 flex 容器中完全无效，写了也白写 - 如果
input高度被padding或line-height拉高，而label还是默认行高，文字会“浮”在中间——这时统一设box-sizing: border-box+ 显式height或line-height更可控 - 现代浏览器（Chrome 119+、Firefox 117+、Safari 17.4+）已原生支持；旧版 Safari 需加
-webkit-align-items: last baseline - 不要给
label或input单独设margin-top/bottom，会干扰基线锚点 - 若父容器里混了
textarea或select，它们可能没有“最后一行文字”，此时last baseline行为退化为baseline，建议这类控件单独处理或降级为center
需要底部对齐？优先试 align-items: last baseline
当表单旁边还有按钮、纯文本或单位符号（如 “kg”、“%”），且你希望它们和 input 的 placeholder 底部、label 最后一行文字底部严格拉齐，last baseline 是目前最语义正确、零 hack 的解法。
它不是靠猜，而是真实取每个子项最后一行内联内容的基线（label 的末行文字、input 的 placeholder、button 的文字），天然适配分离式结构。
立即学习“前端免费学习笔记（深入）”；
多行表单对齐失效？问题大概率出在容器层级
常见错误是给整个 <form></form> 设 display: flex; flex-direction: column，再把所有 label 和 input 并列放进去——一旦某个 label 文字换行，整列高度就被撑开，右侧所有 input 全部下移，形成“阶梯状错位”。
真正有效的结构是每组 label + input 各自一个 flex 容器，彼此隔离：
.form-row {
display: flex;
align-items: center;
gap: 8px;
}
.form-row label {
flex: 0 0 120px;
flex-shrink: 0;
text-align: right;
}
.form-row input {
flex: 1;
min-width: 0;
}
-
flex: 0 0 120px确保标签宽度固定且不压缩，避免文字多时挤压输入框 -
min-width: 0是防止flex: 1在窄屏下溢出的关键，尤其在 Safari 中容易被忽略 - 如果 label 可能超长，加
white-space: normal; word-break: break-word，但别用overflow: hidden
兼容老环境时，align-items: center + 微调比各种 hack 更可持续
面对 IE11 或旧版 Safari，last baseline 不可用，强行用 transform: translateY() 或绝对定位，短期看着齐，后期改字体、换主题、加图标时全得重调。
更务实的做法是守住 align-items: center，再通过三处控制收口：
- 所有表单控件统一
box-sizing: border-box，确保padding和border不影响尺寸计算 - 重置
input:focus的outline：用outline: none+box-shadow替代，避免焦点态突然“跳动” - 为
label和input显式设置相同line-height（如line-height: 1.5）和font-size，缩小天然渲染差异
对齐从来不是调一次 align-items 就结束的事——它得和高度控制、焦点行为、跨浏览器渲染细节捆在一起看。漏掉任意一环，都可能在某个用户聚焦输入框的瞬间，悄悄错开一像素。
