单选按钮组居中需对容器设text-align:center或display:flex；margin:0 auto无效因无固定宽；表格中应直接设置td的text-align:center。
单选按钮组整体居中，别碰 text-align: center 在 form 上
直接给 form 加 text-align: center 不会让单选按钮组居中，只会让所有 label 和 input 内部文字居中，按钮本身依然靠左。真正起作用的是按钮组的**容器**——它得是块级、有宽度、且能响应文本对齐。
最稳做法：把单选按钮和对应 label 包进一个 div，再给这个 div 设 text-align: center，同时确保里面的 input[type="radio"] 和 label 是行内级（默认就是）。
-
div容器必须是块级（默认满足），不能设display: flex或float，否则text-align失效 - 单选按钮和
label之间不能有换行或空格（或设父容器font-size: 0，内部再重置），否则会多出空白间隙 - 如果按钮组横排太长撑出容器，加
white-space: nowrap防止折行破坏居中
用 Flex 布局控制单选按钮组的排列与居中
想让单选按钮横向并排、整体居中、还能控制间距，display: flex 是更可控的选择。但注意：不是给 form 加，而是给包裹按钮组的容器加。
示例结构：
<div class="radio-group"> <input type="radio" name="theme" id="light" value="light"><label for="light">浅色</label> <input type="radio" name="theme" id="dark" value="dark"><label for="dark">深色</label> </div>
CSS：
.radio-group {
display: flex;
justify-content: center;
gap: 1rem;
}
-
justify-content: center居中整组，不依赖子元素宽度 -
gap比手动写margin更干净，避免首尾多出空白 - 每个
input和label默认是行内级，Flex 下自动变成 Flex 项目；若需垂直对齐，加align-items: center - IE11 不支持
gap，可退回到margin-right+ 最后一项margin-right: 0
表格里放单选按钮，居中逻辑完全不同
如果单选按钮在 table 的 td 里，默认是左对齐。这时不能靠父 form 或外层 div 控制，得直接操作单元格。
- 给
td加text-align: center即可水平居中按钮和文字（input和label默认 inline） - 避免给
tr或table设text-align，影响其他列内容 - 若要垂直居中，
td加vertical-align: middle，配合足够行高（line-height或padding） - 不要在
td里嵌div再 flex —— 表格单元格的渲染机制会干扰 Flex 行为，尤其在 Safari 和旧版 Edge 中
margin: 0 auto 对单选按钮组无效，别试
有人试图给 div.radio-group 加 margin: 0 auto 居中，结果没反应。原因很实在：div 默认是块级，但 margin: 0 auto 只对**有明确宽度**的块级元素生效。而单选按钮组宽度不确定，浏览器无法计算“左右均分多少”。
- 硬设
width: fit-content？IE 完全不支持，width: max-content兼容性更差 - 设
width: 300px？按钮数量一变就溢出或留白，响应式下更难维护 - 唯一靠谱的替代：用
display: inline-block+ 父容器text-align: center，但这又回到第一个方案 - 结论：单选按钮组不是“固定宽块”，别强行套
margin: 0 auto范式
真正容易被忽略的是上下文：按钮组是否嵌在 Flex 容器里？td 是否被 JS 动态加了 style="text-align: left"？label 有没有 display: block 把布局撑乱？这些细节一错，所有居中规则都会静默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
