因为label和input默认基线不一致：label是内联文本元素，input是替换元素，浏览器按各自盒模型计算高度，导致视觉错位；根本解法是统一vertical-align: middle、box-sizing: border-box，并为每组label+input设置独立flex容器（display: flex; align-items: center）。
为什么 input 和 label 总是“看起来没对齐”
不是你 CSS 写错了，而是浏览器给不同表单元素设了不同的 vertical-align 默认值：input 是 baseline，label 是 text-bottom 或按字体自动算，select 和 textarea 又各自略有差异。再加上默认 line-height 不一致、box-sizing 混用（content-box vs border-box），视觉错位就成常态。
别碰 margin-top 硬调——换字号、缩放页面、切到 iOS Safari 就失效。真正稳的解法是统一基准 + 局部隔离：
- 所有表单控件（
input、select、textarea、button）加vertical-align: middle - 每组
label+input必须包进独立<div class="form-row">，不共用父容器 <li>重置 <code>box-sizing: border-box到全部控件，避免 padding/border 影响高度计算 - 显式设
line-height: normal在.form-row上，防止父级 line-height 泄漏干扰 .form-row { display: flex; align-items: center; gap: 0.5em; }-
label设flex: 0 0 120px（固定宽防挤压），input设flex: 1; min-width: 0（防小屏溢出） - 删掉 HTML 中
label和input之间的换行或空格，或给.form-row加font-size: 0再单独恢复子元素字号 - 别在
input上再写vertical-align或margin-top—— flex 里这些属性被忽略或冲突 - 给
label显式加line-height: 1.4（比默认略高，拉低视觉重心） - 或加
padding-top: 2px（数值按实际调试，1–3px 足够） - 禁用
label的user-select: none（某些旧版 iOS 会因此影响 baseline 计算） - 不用
for/id绑定的label，改用包裹式写法<label>姓名<input></label>—— 这种结构在 iOS 下对齐更稳定 -
input { text-align: center }→ 控制用户输入内容的水平位置（适用于验证码、编号等） - 让整个
input元素在页面中水平居中，得靠父容器布局：text-align: center+display: inline-block，或margin: 0 auto+ 固定宽，或display: flex; justify-content: center - 垂直居中需要额外条件：父容器要有明确高度，或用
place-items: center（Grid）、align-items: center（Flex）配合足够撑高的内容
flex 布局中 align-items: center 为啥有时没反应
常见原因是结构没套对：把整个 <form></form> 设为 display: flex，然后指望里面所有 label 和 input 自动成对居中——这不行。Flex 容器只对**直系子元素**生效，而 label 和 input 通常隔了多层或不在同一层级。
正确做法是让每行自己成为 flex 容器：
iOS Safari 下 label 文字偏上怎么 fix
iOS Safari 渲染 label 时基线计算更激进，尤其搭配系统字体时，文字常“浮”在控件上方，哪怕 vertical-align: middle 也压不住。
实测有效的补救手段有限但精准：
表单整体居中和内部控件居中是两码事
很多人想“让表单居中”，结果把 text-align: center 扔给 <form></form>，却发现 input 内文字也居中了——这是混淆了两个层级：
最易被忽略的是：所有控件必须统一 vertical-align 和 box-sizing，否则哪怕用了 Flex，跨浏览器渲染依然错位——这不是 bug，是规范允许的实现差异。
