单选框居中需以label包裹input为前提，因input是行内替换元素，直接对其设margin:0 auto或text-align:center无效；label包裹确保点击、语义与可访问性正确，后续CSS居中才有效。

单选框（radio）本身不能单独“居中”，真正要居中的是「input[type="radio"] + 后续文字」这个视觉整体；直接对 input 加 margin: 0 auto 或 text-align: center 无效，因为它是行内替换元素，不响应块级居中逻辑。

用 label 包裹 input 是前提

结构上必须让 input 成为 label 的子元素，否则点击穿透、语义、可访问性全受影响，后续所有 CSS 居中操作都会失准：

<label>
  <input type="radio" name="theme" value="dark">
  深色模式
</label>

• 不要用 for/id 分离写法（如 ...>），那样会让 input 和文字在 DOM 中物理分离，vertical-align 容易被兄弟元素干扰
• 如果必须用 for/id（比如 CMS 生成限制），至少确保 input 和 label 在同一行内流中，中间不能插入
  、

  等块级容器

  display: flex + align-items: center 解决垂直对齐

  这是目前最稳定、无需像素微调、跨浏览器一致的方案。把 label 设为弹性容器，让内部 input 和文字自然对齐：

  label {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  • align-items: center 直接接管对齐，不再依赖 vertical-align 那套基于 x-height 的模糊计算（中文无小写字母 x，vertical-align: middle 基本靠猜）
  • gap 比给 input 加 margin-right 更可控，不会因多行文本或图标引入意外偏移
  • 绝对不要给 input[type="radio"] 单独设 vertical-align、line-height 或 margin-top —— 这些在 flex 容器里要么无效，要么破坏一致性

  整组控件水平居中，看父容器怎么设

  很多人以为“让 label 居中”就完事了，其实要两层控制：

  

  使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

  使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

  下载

  • 内层：上面的 flex 让 radio 和文字彼此对齐
  • 外层：让整个 label 在其父容器中水平居中

  根据父容器类型选对应方式：

  • 父容器是普通块级元素（如
    ）：加 text-align: center（前提是 label 是 inline 或 inline-block）
  • 父容器有固定宽度且是块级：给 label 加 margin: 0 auto，但需先设 display: block
  • 父容器已是 display: flex：直接加 justify-content: center，最干净

  常见翻车点：label 默认是 inline 元素，若父容器只设了 text-align: center 而没让它占满宽度，实际毫无反应。

  表格（）里别硬扛 vertical-align

  在 中直接对 input 加 vertical-align: middle 表面有效，实则隐患重重：

  • 是 display: table-cell，vertical-align 控制的是单元格内容整体位置，不是 input 和文字之间的相对对齐
  • Firefox 把 radio 当图片渲染，IE 按旧基线算，两者偏差常达 1–2px
  • 字号稍一变化（比如从 14px 改成 15px 思源黑体），vertical-align: middle 就立刻偏高或下沉

  更可靠的做法：把 自身设为 display: flex; align-items: center;，再把 input 和文字包进一个 label 里——彻底绕过 baseline 计算问题。

  真正难的不是写几行 CSS，而是意识到：居中不是调整某个元素的位置，而是构建一个可预测、可维护、不随字体/浏览器/缩放抖动的布局上下文。一旦开始靠 margin-top: 2px 或 line-height: 1.8 微调，就已经掉进兼容性坑里了。