单选框radio无法通过vertical-align:middle真正居中，因其作为替换元素仅对齐基线而非视觉中心；推荐将label设为display:flex并配合align-items:center实现可靠垂直居中。
单选框 <input type="radio"> 本身无法直接 vertical-align 居中
单选框是替换元素（replaced element），默认 inline 行内行为，但它的对齐逻辑和文字不同：vertical-align 对它只影响基线位置，不是“视觉中心”。常见错误是给 <input> 直接设 vertical-align: middle，结果只是轻微上移，旁边文字仍错位。
真正可靠的方案是控制它的**父容器（通常是 <label> 或 <td>）的行内上下文**：
- 确保父容器是
display: table-cell或display: inline-block，再配vertical-align: middle - 更推荐把整个 label 设为
display: flex; align-items: center—— 这样<input>和紧邻的<span>文字自然垂直居中 - 避免只给
<input>加margin-top或padding手动调，响应式下极易错位
<label> 包裹时用 Flex 最稳
登录表单里单选框几乎都和文字一起出现，比如 <label><input type="radio"> 记住我</label>。这时不要拆开处理，直接让 <label> 成为 flex 容器：
label.radio-label {
display: flex;
align-items: center;
gap: 8px; /* 替代 margin，更可控 */
}注意点：
立即学习“前端免费学习笔记（深入）”；
- 别在
<input>上设height或line-height—— 浏览器默认渲染尺寸不一致，强行设反而破坏原生可访问性 - 如果 label 是块级（如
display: block），align-items无效，必须先改display: flex - 老项目若需兼容 IE11，改用
display: inline-block+vertical-align: middle配合line-height匹配高度
表格单元格里单选框怎么居中？
如果单选框在 <td> 里（比如权限配置表），vertical-align: middle 对 <td> 本身有效，但对内部的 <input> 不直接起作用——因为 <input> 默认是 inline，而 vertical-align 在 inline 上只管基线。
两种解法：
- 给
<td>设display: flex; align-items: center; justify-content: center（现代项目首选） - 保持
<td>默认 table-cell，但把<input>包进<span>并设display: inline-block; vertical-align: middle - 千万别给
<tr>设height后指望vertical-align自动生效——若<td>内容过少，实际渲染高度可能低于设定值，导致“看起来没居中”
为什么加了 vertical-align: middle 还是偏上？
这不是 bug，是浏览器渲染规则：单选框的 baseline 默认落在控件底部附近，vertical-align: middle 是让它的 baseline 对齐父容器 x-height 的中点，而非像素级居中。所以你会看到它比文字略低一点。
根本解决方式不是调 vertical-align，而是换布局模型：
- Flex / Grid 是唯一能真正按“几何中心”对齐的方案
- 表格场景下，
<td> { display: flex }比vertical-align更可靠，且兼容性已覆盖所有主流浏览器（Chrome 29+、Firefox 20+、Safari 6.1+） - 如果必须用 inline 布局，可用
transform: translateY(-2px)微调，但仅限固定字号场景，不推荐作为通用方案
真正麻烦的不是怎么写，而是意识到：单选框的“垂直居中”从来不是单个元素的事，而是它所处的行内上下文、父容器 display 类型、以及是否允许脱离 inline 渲染流共同决定的。
