position: absolute + transform: translatey(-50%) 是单选框垂直居中的鲁棒方案，需父容器设 position: relative 且有明确高度（如 line-height 或 height），子元素禁用 margin 和 vertical-align，统一 box-sizing: border-box。
用 position: absolute 强制对齐，但必须配 transform: translateY(-50%)
单选框（input[type="radio"]）在绝对定位后常因 baseline 行为不可控而偏高或偏低，直接设 top: 2px 或 top: 4px 看似快，实则脆弱——字号一变、浏览器一换、缩放一开就错位。
真正鲁棒的做法是：让单选框的垂直中点与父容器内容区中点重合。
需满足三个前提：
- 父容器设
position: relative，且高度明确（如line-height: 1.5或height: 24px） - 单选框设
position: absolute+top: 50%+transform: translateY(-50%) - 移除所有影响 baseline 的
vertical-align，它在绝对定位下无效
示例：
.radio-wrapper {
position: relative;
line-height: 1.5;
}
.radio-wrapper input[type="radio"] {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
}
为什么不能只靠 top 像素值硬调
Chrome 对 input[type="radio"] 的内边距渲染比 Firefox 多 1px，Safari 又可能把默认 border 渲染得更厚；同一段 top: 3px 在不同环境里实际偏移量能差出 2px。
更麻烦的是：当父容器字体从 12px 换成 14px，或用户启用系统级字体缩放，硬编码的像素值立刻失效。
你调的不是“位置”，而是“当前渲染快照下的偏移”，这不是工程做法。
- 避免写
top: 3px、top: 4px这类固定值 - 不要依赖
vertical-align: middle配合绝对定位——它对脱离文档流的元素无意义 - 若父容器高度不固定（如多行文本），
top: 50%会以整个块高度为基准，此时应改用 flex 方案而非绝对定位
box-sizing 和 margin 是隐藏陷阱
绝对定位的单选框一旦加了 margin-top 或 margin-bottom，视觉位置看似微调了，但它的 top: 50% 计算基准没变——结果是“调了等于没调”，甚至引发意外重叠。
同理，没设 box-sizing: border-box 时，给单选框加 border 会让整体尺寸溢出，进一步破坏对齐稳定性。
- 统一加
input[type="radio"] { box-sizing: border-box; } - 禁用
margin调整对齐，所有偏移都走transform - 如果必须兼容 IE11，
transform: translateY(-50%)仍可用，无需前缀
真正卡住效果的，往往不是对齐逻辑，而是父容器高度是否参与计算
哪怕你把 transform 写得再准，只要父容器没设 line-height 或 height，top: 50% 就会按 0 计算，单选框直接贴顶。
这不是 bug，是 CSS 定位规范行为：百分比 top 依赖包含块的高度，而未显式设高的父容器，其高度由内容撑开，此时“50%”无意义。
- 检查父容器是否真的有可计算的高度（
height、min-height、line-height三者至少其一） - 避免把
position: relative加在label上却忘了它本身是 inline 元素——inline 元素默认无高度，top: 50%依然无效 - 最稳妥的父容器结构是：
div.radio-group（block，带line-height） >label（inline） >input[type="radio"]（absolute）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
