当使用 Flex 布局排列带 ::before 伪元素的圆形单选按钮时，若按钮尺寸为奇数值，常因容器未设置垂直对齐方式导致视觉偏移；仅需在父容器添加 align-items: center 即可实现完全垂直居中。
当使用 flex 布局排列带 `::before` 伪元素的圆形单选按钮时，若按钮尺寸为奇数值，常因容器未设置垂直对齐方式导致视觉偏移；仅需在父容器添加 `align-items: center` 即可实现完全垂直居中。
在构建自定义单选按钮（radio button）组件时，开发者常借助 ::before 伪元素绘制内部高亮圆点，并通过 translate: -50% -50% 实现绝对定位居中。然而，即使伪元素自身已正确居中，父级 Flex 容器若未显式声明垂直对齐方式，子元素（如 .input-radio-button）仍会沿默认基线（baseline）或起点（start）对齐——尤其在按钮尺寸为奇数（如 15px）时，像素级渲染差异会放大偏移感，造成“看起来没居中”的错觉。
根本解法非常简洁：在 .input-radio 容器上补充 align-items: center，强制所有 Flex 子项在交叉轴（即垂直方向）上居中对齐：
.input-radio {
display: flex;
align-items: center; /* ✅ 关键修复：启用垂直居中 */
gap: 10px;
height: fit-content;
}⚠️ 注意事项：
- align-items: center 作用于 Flex 子项整体（包括 <button> 和 <label>），确保按钮与文本在高度方向上视觉对齐；
- 无需修改 HTML 结构或调整伪元素的 left/top/translate 计算逻辑——那些已正确实现内部居中，问题出在容器级布局；
- 若后续需兼容旧版浏览器（不支持 translate 或 aspect-ratio），建议补充 transform: translate(-50%, -50%) 回退写法（现代写法 translate: -50% -50% 已被广泛支持）；
- gap 属性安全可用（Chrome 100+、Firefox 103+、Safari 14.1+），若需更广兼容，可用 margin-right 替代。
最终效果：无论 --size 设为 13px、15px 还是 19px，按钮始终稳定居中，且与右侧 label 文本垂直对齐一致，彻底解决小尺寸下的像素级偏移问题。
