绝对定位表单控件错位主因是box-sizing、line-height、vertical-align及字体渲染差异；应统一box-sizing: border-box，用top: 50%+transform居中，设vertical-align: middle，避免硬调top/left像素值。
绝对定位后表单控件上下左右偏移不一致
用 position: absolute 布局表单时，input、select、textarea 经常出现视觉错位——比如文字基线对不齐、框体高度参差、右边距忽大忽小。这不是浏览器 bug，而是绝对定位脱离文档流后，控件默认的 box-sizing、line-height、vertical-align 和字体渲染差异共同作用的结果。
单纯靠 top/left 加像素值硬调，容易在不同字号、不同浏览器（尤其 Safari 对 input 的内边距处理更“厚”）或缩放后失效。
- 优先统一所有控件的
box-sizing: border-box，避免padding和border算入尺寸引发意外溢出 - 显式设置
height和line-height（对单行input有效），让文字垂直居中可预测 - 避免只调
top：改用top: 50%+transform: translateY(-50%)实现真正居中，比固定像素更鲁棒
padding 微调导致控件宽度失控
给绝对定位的 input 加 padding-left: 12px 后，发现整体宽度超出父容器，甚至触发水平滚动——这是因为没设 box-sizing，padding 默认叠加在 width 外。
更隐蔽的问题是：某些 UI 框架（如 Bootstrap）已重置过 input 的 padding，你再加一层，实际内边距翻倍，文字离左框距离变大，但控件视觉位置却没变，误以为“没生效”。
立即学习“前端免费学习笔记（深入）”；
- 务必在全局或组件级加
* { box-sizing: border-box }，一劳永逸 - 若需兼容老项目，至少对表单控件单独写：
input, select, textarea { box-sizing: border-box; } -
padding调整建议从4px、8px这类偶数起步，避开 subpixel 渲染抖动
不同控件间 baseline 对不齐
input[type="text"]、select、button 在绝对定位下经常“一高一低”，即使设了相同 height 和 padding。根源在于它们的默认 vertical-align 是 baseline，而 baseline 对齐的是字母 x 的底部，不是盒子底边。
比如 select 下拉箭头会把 baseline 往下拉一点，input 则更“干净”，结果就是看着像矮了一截。
- 统一设
vertical-align: middle或vertical-align: top，比依赖 baseline 更可控 - 若必须保持 baseline 对齐（如和旁边文字混排），可用
margin-bottom: -2px手动抬高select，但仅限固定字号场景 - Chrome 和 Firefox 对
select的内部结构渲染不同，height设为36px时，Firefox 可能多出 1px 内边距，此时用transform: scaleY(0.99)强制压平反而比调padding更稳定
响应式断点下 top/left 像素值失效
用 top: 12px 把 input 垂直居中在某个卡片里，PC 看着刚好，手机横屏一转，控件就贴顶或掉出视口——因为 top 是相对于最近的定位祖先，而该祖先的高度在响应式中可能变化，12px 不再是“中间”。
更麻烦的是，有些设计稿按 375px 宽度标了 left: 24px，但实际设备像素比（dpr）为 2 或 3 时，这个 24px 在物理屏幕上可能模糊或错位。
- 改用百分比或视口单位：
top: 50%; left: 50%配合transform: translate(-50%, -50%) - 如果父容器高度不固定，用
inset（CSS Logical Properties）更语义化：inset: 0 auto auto 0表示只约束上右边界，其余自由 - 避免在媒体查询里重复写
top: 8px / 12px / 16px，改用 CSS 自定义属性：--form-offset: 12px，然后top: var(--form-offset)，便于集中维护
实际对齐问题往往卡在「同时要兼容 Chrome/Firefox/Safari + 支持缩放 + 不破坏无障碍」这三件事上，微调时优先动 transform 和 box-sizing，少碰 top/left 的具体数值。
