最简解是给.form-row设display: flex和align-items: center，但label与input必须同级直属于该容器；若混用float或嵌套div则flex失效；label需用flex: 0 0 120px防宽度不均，ie11需加min-height: 40px兜底。
align-items: center 是最简解，但结构必须正确
直接给 .form-row 设 display: flex 和 align-items: center 就能解决 90% 的垂直错位问题——前提是 label 和 input 必须是同一父容器的直接子元素。
- 常见错误：把
label套在div里、input单独放一层，或混用float，这会让 flex 完全失效 -
label和input必须平级：<div class="form-row"> <label>Email</label><input type="email"> </div> - 别给
label设vertical-align—— flex 容器里它无效
label 宽度不一致导致 input 起始位置飘移？用 flex: 0 0 固定基准
当 label 文字长短差异大（比如“姓名” vs “确认新密码”），默认 flex-shrink: 1 会让短 label 被压缩、长 label 撑开整行，input 的左边缘就左右晃动。这不是对齐问题，是基准没统一。
- 强制 label 不缩放：
.form-row label { flex: 0 0 120px; text-align: right; padding-right: 8px; } -
flex: 0 0 120px比单纯写width: 120px更安全，避免和flex: 1冲突 - 若 label 可能超长，加
white-space: normal; word-break: break-word;，别用overflow: hidden截断可读性 - 别给
input设width: 100%—— 它会和flex: 1计算打架，Safari 中尤其异常
IE11 里 align-items 失效？加 min-height 是硬通货
IE11 对 align-items 的支持有 bug：父容器没明确高度时，center 经常被忽略。这不是你 CSS 写错了，是渲染引擎根本没算出交叉轴范围。
- 最稳兜底：
.form-row { min-height: 40px; }（匹配典型 input 行高） -
min-height: 40px是经验值，对应font-size: 14px + padding: 8px - 别依赖
align-self在 IE11 单独调input—— 它比align-items更容易随机失效 - 终极兼容方案：为 IE11 单独加 class，用
display: table-cell; vertical-align: middle;
混用 textarea/select 或 focus 时对齐偏移？优先用 align-self 控制 input
如果表单里有 textarea、select 或带图标的控件，它们默认高度不一致，align-items: center 会让文字看起来“飘”在中间。这时更适合只调 input，保留 label 的自然对齐。
- 给
input单独设：.form-row input { align-self: center; } -
align-self优先级高于align-items，且只影响当前项目 - focus 时 outline 或 border 变化会悄悄顶开对齐效果：统一重置
input:focus { outline: none; box-shadow: 0 0 0 2px #007bff; } - 确保
input的flex声明显式写出三项，例如flex: 0 1 auto，避免浏览器回退到模糊默认值
min-height、label 是否真的没嵌套、input 的 box-sizing 是否为 border-box、以及 focus 状态下有没有偷偷改 border-width。这些点不检查，光调 align-items 就像拧松了螺丝还使劲拧螺母。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
