表单控件垂直居中必须依赖父容器布局，单独设置vertical-align: middle无效，因其仅对inline/inline-block元素生效且各控件baseline计算不一致；最稳方案是父容器设display: flex并配合align-items: center。
表单控件（input、button、label）本身不能直接“垂直居中”，必须靠父容器的布局上下文来控制对齐行为。单独给 input 写 vertical-align: middle 或 margin: auto 基本无效，除非它处于行内流且有明确 baseline 参考系。
为什么 vertical-align: middle 单独写没用？
因为 vertical-align 只对 display: inline 或 inline-block 元素生效，而浏览器对不同表单控件的 baseline 计算规则不一致：
-
input[type="text"]按字体 x-height 推算中心点，但默认 font-size 可能被浏览器最小字号限制（如 Chrome 强制 ≥13.33px） -
input[type="checkbox"]被当图片处理，baseline 在底部，不和文字对齐 - 如果父容器是
div且没设line-height或高度，vertical-align就失去参考基准 - Bootstrap 等框架常把
form设为display: flex，此时子元素的vertical-align完全被忽略
最稳的方案：用 display: flex 控制整行对齐
给每组表单项（比如一个 label + 一个 input）的直接父容器设 display: flex，再用 align-items: center：
.form-row {
display: flex;
align-items: center;
margin-bottom: 8px;
}
label {
display: block;
width: 120px; /* 固定宽度，避免长度不一导致错位 */
padding-right: 8px;
}
input, button {
flex: 1; /* 输入框自动占满剩余空间 */
box-sizing: border-box;
font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
font-size: 14px;
}关键点：
立即学习“前端免费学习笔记（深入）”；
- 不要给
input单独设height后再靠line-height居中——多行文本会崩 - 所有控件必须继承相同
font-family和font-size，否则 baseline 错位不可避免 -
box-sizing: border-box是必须的，否则边框和 padding 会让实际高度超出预期
兼容老浏览器（IE10 及以下）的 fallback 方案
如果必须支持 IE，display: table-cell 是唯一可靠选择，但只适用于结构固定的单行表单：
.form-row {
display: table;
width: 100%;
}
.form-row > * {
display: table-cell;
vertical-align: middle;
}
label {
width: 120px;
padding-right: 8px;
}注意：
- 这种写法会让所有子元素强制同行显示，无法响应式换行
-
table-cell不支持flex或grid的任何特性，后期扩展性差 - 现代项目里，只要不强制兼容 IE，就别用这个方案
真正容易被忽略的是：表单对齐不是调某个属性就能“修好”的事，而是整个渲染链路的协同问题——font-family 是否一致、box-sizing 是否统一、父容器是否提供有效高度参考，缺一不可。哪怕只漏掉 box-sizing: border-box，在 Chrome 和 Firefox 下就可能差出 2px。
