单选框居中需 label 包裹 input 并设 flex 布局实现内部对齐，再通过父容器 text-align: center 或 margin: 0 auto 实现外部水平居中，确保语义正确与可访问性。
单选框（radio）本身是行内替换元素，原生尺寸小、基线位置怪，直接加 text-align: center 或 margin: 0 auto 对其父容器无效；真正要居中的是「整个控件组」——即 <input type="radio"> 和紧邻的 <label></label> 文本作为一个视觉整体。
用 label 包裹 input 是最稳的起点
结构上必须让 input 成为 label 的子元素，否则无法保证点击穿透和语义一致性：
<label> <input type="radio" name="theme" value="dark"> 深色模式 </label>
这样做的好处不只是可点击区域变大，更重要的是：后续所有 CSS 居中操作都只作用于这个 label 块，不用再协调两个分离元素的对齐关系。如果用了 for/id 显式绑定，input 和 label 在 DOM 中物理分离，vertical-align 就容易失效或受兄弟元素干扰。
display: flex + align-items: center 直接搞定垂直居中
给包裹用的 label 设置弹性布局，是最可靠、浏览器兼容性好（Chrome 21+/Firefox 20+/Safari 6.1+）、且不依赖 magic number 的方式：
立即学习“前端免费学习笔记（深入）”；
label {
display: flex;
align-items: center;
gap: 8px; /* 可选：控制 radio 和文字间距 */
}注意点：
- 不要对
input[type="radio"]单独设vertical-align，它在 flex 容器里会被align-items统一接管 - 避免同时设
line-height和height，可能引发文字上下偏移 - 如果 label 内还有图标或 span，
gap比margin更可控
水平居中整组控件：别只盯 label，看父容器
用户常误以为“让 label 居中”就能让单选框+文字在页面中居中，其实需要两层控制：
- 内层：用上面的
flex让 radio 和文字彼此对齐 - 外层：让整个
label在其父容器中水平居中，比如：text-align: center（父元素是块级）或margin: 0 auto（父元素是display: block且有明确宽度） - 若父容器是 flex 布局，直接用
justify-content: center
常见翻车点：给 label 加了 text-align: center，但 label 是 inline 元素，默认不占满父宽，结果毫无反应。
绝对不要碰的坑
这些操作看似能“看起来居中”，但会破坏可访问性或稳定性：
-
input { margin-top: 4px }：靠猜像素值微调，换字体/缩放就错位 -
label { line-height: 2em }：仅对单行文本有效，换行后文字上下挤压 -
input { transform: translateY(-2px) }：脱离文档流，影响焦点 outline 渲染和屏幕阅读器定位 -
label { pointer-events: none }：直接让点击失效，哪怕样式看起来正常
真正稳定的居中，永远建立在语义结构正确（label 包裹 input）+ 布局模型清晰（flex 控制内部对齐，父容器控制外部定位）的基础上。任何绕过这两点的“速成技巧”，都会在换字体、适配高对比度模式或接入自动化测试时暴露问题。
