根本原因是浏览器对不同元素的vertical-align默认值不同，推荐用flex布局包裹label+input并设align-items:center，统一vertical-align:middle仅适用于简单内联表单，表格布局已不推荐。

为什么和默认看起来不对齐

根本原因不是“没写对齐代码”，而是浏览器对不同元素的 vertical-align 默认值不同：input 是 baseline，label 按文字行高视觉居中，但基线位置不一致。加上 line-height、font-size、padding 的微小差异，肉眼就会觉得“偏上”或“偏下”。强行加 margin-top 或 padding 属于掩盖问题，不是解决逻辑。

用 flex 布局包裹每组 label + input 最可靠

这是目前最推荐的做法，语义清晰、响应式友好、兼容性足够（IE11+ 需加 -ms- 前缀）。

• 把每个 label 和对应的 input（或 select、textarea）包进一个 <div class="form-row"> 里
• 给该容器设 display: flex 和 align-items: center
• label 设固定宽度（如 flex: 0 0 120px），input 设 flex: 1 填满剩余空间
• 避免在 input 上单独设 vertical-align —— 它在 flex 容器里已失效

示例：

<div class="form-row">
  <label>用户名</label>
  <input type="text" name="username">
</div>

.form-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.form-row label {
  flex: 0 0 120px;
}
.form-row input {
  flex: 1;
}

统一 vertical-align: middle 能快速修复简单表单

适用于旧项目改造或结构极简的表单，但只在 label 和 input 处于同一行内流（inline/inline-block）时有效。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

立即学习“前端免费学习笔记（深入）”；

• 必须同时给 label、input、select、textarea、button 设 vertical-align: middle
• 父容器不能有干扰性的 line-height（建议显式设为 line-height: normal）
• 禁用 float 布局——它会让元素脱离文档流，vertical-align 失效
• 如果 input 用了 height 或 padding 导致行高撑开，middle 才有空间可居中

表格布局（display: table-cell）现在基本不用了

虽然 display: table-cell + vertical-align: middle 确实能对齐，但它本质是模拟表格语义，破坏了表单的语义结构，且响应式调整困难。

• 仅在需要兼容 IE9 或极老 Android 浏览器时才考虑
• 若真要用，必须确保父容器是 display: table，子元素是 display: table-cell，否则 vertical-align 不生效
• 现代项目里混用 table 布局会增加维护成本，尤其当表单字段动态增减时

真正容易被忽略的是：对齐问题往往不是单点样式问题，而是整套表单容器的 line-height、font-size、box-sizing 是否统一。改一个 vertical-align 可能暂时见效，但根子在基础样式体系是否收敛。