当使用 Flex 布局排列自定义 radio 按钮时，若按钮尺寸为奇数值（如 15px），其内部伪元素可能视觉偏移；仅需在容器上添加 align-items: center 即可实现垂直+水平双重居中，无需修改 HTML 结构。
当使用 flex 布局排列自定义 radio 按钮时，若按钮尺寸为奇数值（如 15px），其内部伪元素可能视觉偏移；仅需在容器上添加 `align-items: center` 即可实现垂直+水平双重居中，无需修改 html 结构。
在构建自定义单选按钮（radio）组件时，开发者常借助 ::before 伪元素绘制中心圆点，并依赖 left: 50%; top: 50%; translate: -50% -50% 实现绝对定位居中。然而，该方案仅保证伪元素在其父元素内的精确定位，却无法解决父元素自身在 Flex 容器中的对齐问题——尤其当 .input-radio-button 高度为奇数（如 15px）时，浏览器像素渲染的半像素对齐限制会导致肉眼可见的上下偏移。
根本原因在于：.input-radio 容器虽设为 display: flex，但默认 align-items: stretch，会拉伸子项高度以填满容器，而未显式指定垂直对齐方式。此时，即使子元素内部居中逻辑正确，其基线（baseline）或盒模型边缘仍可能因字体、行高或默认对齐行为产生错位。
✅ 正确解法非常简洁：
只需在 .input-radio 规则中添加 align-items: center，即可强制所有子项（包括 .input-radio-button）沿交叉轴（即垂直方向）居中对齐：
.input-radio {
display: flex;
align-items: center; /* ? 关键修复：启用垂直居中 */
gap: 10px;
height: fit-content;
}
⚠️ 注意事项：
- align-items: center 作用于 Flex 容器的交叉轴（column 方向为垂直，row 方向为水平），此处因默认 flex-direction: row，故生效方向为垂直居中；
- 无需改动 .input-radio-button 或其 ::before 的定位逻辑，原有 translate(-50%, -50%) 依然负责伪元素在其父内的精确居中；
- 若后续需支持 RTL（从右向左）布局，建议同时设置 direction: ltr 或使用 justify-content: flex-start 显式控制主轴对齐，避免 gap 行为意外变化；
- 对于极小尺寸（如 9px 或 11px），可考虑将 --size 设为偶数值（如 16px）进一步规避亚像素渲染模糊，但非必需——align-items: center 已从根本上解决问题。
总结：Flex 布局中“元素未完全居中”的常见误区，往往源于混淆了容器内对齐（align-items / justify-content）与元素内定位（position + translate）两个层级。掌握这一区分，能快速定位并修复大量 UI 对齐类问题。
