最简解是给.form-row设display: flex和align-items: center，但需确保label和input为同一父容器的直接子元素，避免嵌套或float混用，并处理ie11、focus样式等兼容性问题。
align-items: center 是最简解，但得先确保结构正确
直接给 .form-row 设 display: flex 和 align-items: center 就能解决 90% 的垂直错位问题——前提是 label 和 input 必须是同一父容器的直接子元素。常见错误是把 label 套在 div 里、input 单独放，或者用 float 混搭，这会让 flex 失效。
必须用语义化包裹：
<div class="form-row"> <label for="email">Email</label> <input type="email" id="email" name="email"> </div>
-
label和input都是.form-row的直系子项，不能嵌套额外容器 - 别给
label设vertical-align，flex 容器里它无效 - 如果表单混用了
textarea或select，它们默认高度不一致，align-items: center仍生效，但视觉上可能“文字偏高”，这时该换align-self: center单独调input
label 宽度不一致导致输入框挤歪？用 flex-shrink: 0 + 固定宽度
当 label 文字长短不一（比如“姓名” vs “确认新密码”），默认 flex-shrink: 1 会让短 label 被压缩，长 label 撑开整行，结果 input 的起始位置左右飘移。这不是对齐问题，是基准没统一。
强制 label 不缩放：
.form-row label {
flex: 0 0 120px; /* 等价于 flex-shrink: 0 + width: 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 写错了，是渲染引擎根本没算出交叉轴范围。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
最稳的兜底写法：
.form-row {
display: flex;
align-items: center;
min-height: 40px; /* 匹配常见 input 行高 */
}
-
min-height: 40px是经验值，对应font-size: 14px+padding: 8px的典型 input - 别依赖
align-self在 IE11 单独调input，它比align-items更容易随机失效 - 真要兼容老版本，给 IE11 单独加 class：
.form-row.ie11 { display: table-cell; vertical-align: middle; }
focus 时 outline 或 border 变化会悄悄破坏对齐
很多浏览器默认给 input:focus 加 outline，虽然不占布局空间，但视觉外扩会让 align-items: center 看起来突然偏移；更隐蔽的是某些 reset.css 会在 focus 时增大 border-width，触发重排。
统一控制焦点样式：
input:focus {
outline: none;
box-shadow: 0 0 0 2px #007bff;
border-color: #007bff;
}
- 用
box-shadow模拟焦点环，完全可控，不影响布局 - 如果必须保留
outline，加outline-offset: -2px往内收，避免外扩干扰 - 检查是否用了重置库（如 normalize.css），确认它没在 focus 时偷偷改
border或padding
事情说清了就结束。对齐本身不难，难的是各种隐式属性（box-sizing、line-height、min-width）在不同浏览器里组合出的意外行为。调试时先临时加 border: 1px solid red 到 input 和 label，看真实盒模型边界在哪，比猜更省时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
