当使用 flex 布局排布单选按钮与标签时，若未显式设置 align-items: center，奇数尺寸的圆形控件（尤其是配合 ::before 绝对定位中心化）会出现视觉偏移；仅需为容器添加该声明即可实现像素级垂直居中。
当使用 `flex` 布局排布单选按钮与标签时，若未显式设置 `align-items: center`，奇数尺寸的圆形控件（尤其是配合 `::before` 绝对定位中心化）会出现视觉偏移；仅需为容器添加该声明即可实现像素级垂直居中。
在构建自定义单选按钮（radio input）时，开发者常借助 ::before 伪元素绘制内部圆点，并通过 left: 50%; top: 50%; translate: -50% -50% 实现居中。这一策略看似可靠，但在实际渲染中却容易因父容器的默认对齐行为而失效——尤其当 .input-radio-button 宽高为奇数值（如 15px）时，其基线（baseline）或默认 align-items: stretch 行为会导致按钮在 flex 容器中未真正垂直居中，表现为上偏或下浮。
根本原因在于：display: flex 的默认 align-items 值是 stretch，它会拉伸子项高度以填满容器，但对无明确高度设定的内联级或块级替换元素（如 <button>），浏览器可能依据字体度量或行高推导对齐基准，而非几何中心。此时即使伪元素自身已精确定位，父容器的布局上下文仍会引入偏差。
✅ 正确解法非常简洁：仅需在 .input-radio 容器上添加 align-items: center，无需改动 HTML 结构、不依赖 margin 或 line-height 等易受干扰的属性：
.input-radio {
display: flex;
align-items: center; /* ? 关键修复：启用交叉轴居中 */
gap: 10px;
height: fit-content;
}该声明强制所有子元素（包括 .input-radio-button）沿 flex 容器的交叉轴（即垂直方向）中心对齐，使按钮的几何中心与标签文本的 x-height 中心严格对齐，彻底消除奇偶尺寸导致的视觉偏移。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
⚠️ 注意事项：
- 避免同时设置 height 和 align-items: center 造成意外拉伸（本例中 height: fit-content 是安全的）；
- 若后续需支持 RTL（右向左）布局，建议补充 direction: ltr 或使用逻辑属性（如 inline-size 替代 width）提升健壮性；
- translate: -50% -50% 在现代浏览器中表现稳定，但若需兼容旧版 Safari（<15.4），可降级为 transform: translate(-50%, -50%)（两者等效，后者兼容性更广）。
总结：精准居中不是“伪元素的事”，而是容器布局责任的体现。align-items: center 是 flex 布局中解决垂直对齐问题最直接、最语义化、最符合 CSS 设计哲学的方案——少即是多，一行代码，全局生效。
