当使用 flex 布局排列单选按钮与标签时，若按钮尺寸为奇数值（如 15px），其内部伪元素可能视觉偏移；只需在容器上添加 align-items: center 即可实现垂直居中，无需修改 HTML 结构。
当使用 `flex` 布局排列单选按钮与标签时，若按钮尺寸为奇数值（如 15px），其内部伪元素可能视觉偏移；只需在容器上添加 `align-items: center` 即可实现垂直居中，无需修改 html 结构。
在构建自定义单选按钮（radio button）组件时，开发者常借助 ::before 伪元素绘制内部圆点，并通过 position: absolute + translate(-50%, -50%) 实现居中。但实际效果中，尤其当 .input-radio-button 的宽高设为奇数（如 --size: 15px）时，圆点常出现轻微上下/左右偏移——这并非伪元素定位逻辑错误，而是父容器未对齐子项的基线（baseline）或交叉轴起点所致。
根本原因在于：display: flex 默认的 align-items: stretch 会使子元素在交叉轴（此处为垂直方向）拉伸填充容器高度；而当容器 height: fit-content 且子元素无明确高度参照时，浏览器会依据内容（如字体行高、内联盒模型）推导基线位置，导致 button 元素本身在 flex 容器中未真正垂直居中，进而使绝对定位的 ::before 相对于一个“偏移的原点”进行计算，造成视觉错位。
✅ 正确解法非常简洁：仅需在 .input-radio 容器上显式声明 align-items: center，强制所有子项（包括 <button>）在交叉轴上以中心对齐：
.input-radio {
display: flex;
align-items: center; /* ← 关键修复：启用垂直居中 */
gap: 10px;
height: fit-content;
}同时，确保 .input-radio-button 保持如下关键样式（已优化兼容性）：
- 使用 aspect-ratio: 1 替代固定宽高比，增强响应性；
- border-radius: 50% 配合 width/height 确保完美圆形；
- ::before 中 left: 50%; top: 50%; translate: -50% -50% 是现代居中黄金组合，兼容所有尺寸（含奇数）。
⚠️ 注意事项：
- 避免给 .input-radio-button 设置 line-height 或影响内联格式化的属性，防止干扰基线计算；
- 若后续需支持旧版 Safari（<15.4），translate 可回退为 transform: translate(-50%, -50%)；
- font-family: Fontawesome 在此示例中未实际使用图标字符（content: ""），建议移除冗余声明，或改用 ::after 渲染图标以提升语义性。
总结：Flex 布局中的“看似居中实则偏移”问题，90% 源于交叉轴对齐缺失。align-items: center 不仅解决视觉偏差，更让组件行为可预测、可复用——这是现代 CSS 布局中不可忽视的基础原则。
