vertical-align: middle 单独使用失效，因其仅作用于 inline/inline-block 元素，且“middle”基于行内盒的 baseline 与 x-height 计算（非视觉中心），而各浏览器对 checkbox/radio 的默认尺寸、字体渲染及中文方块字高度处理不一致，导致对齐基准偏移；最稳定方案是 label 包裹 input 并设 display: inline-flex + align-items: center，绕过原生控件差异。
直接给 input[type="checkbox"] 和 input[type="radio"] 加 vertical-align: middle 通常不够，必须配合父级容器、字体、行高和浏览器差异一起调 —— 单靠一个属性没法跨浏览器稳定居中。
为什么 vertical-align: middle 单独用会失效
因为 vertical-align 只对 inline 或 inline-block 元素生效，且它的“middle”是相对于行内盒的 baseline + x-height 计算的，不是视觉中心。而不同浏览器对 checkbox 的默认 height、margin、padding 定义不一致（比如 Chrome 是 12px，Firefox 是 9px，IE 是 13px），导致对齐基准点偏移。
-
input默认是 inline 元素，但它的基线位置受字体影响极大；中文环境下尤其容易下坠 - 如果父容器
font-size小于 14px，或用了非等宽字体（如微软雅黑），vertical-align: middle基本不可靠 - 仅设
vertical-align: middle而不重置margin，Firefox 下常多出 1–2px 空隙
label 包裹 + display: inline-flex 是最稳方案
绕过浏览器对原生 input 渲染差异的最有效方式：不用原生控件对齐，改用 label 作为点击载体，内部用 flex 控制子元素对齐。
- HTML 结构必须是
<label><input type="checkbox"><span>文字</span></label>，不能把input和文字分开写 - CSS 中给
label设display: inline-flex; align-items: center; gap: 4px; -
input自身设flex: 0 0 auto; margin: 0;，避免被 flex 拉伸或错位 - 不需要设
vertical-align，也不依赖字体大小 —— flex 的align-items: center是基于容器内容区计算的
兼容旧浏览器时的兜底写法
如果必须支持 IE11 或老版 Edge，inline-flex 不可用，就退回「包裹 + 行高对齐」模式：
- 给
label设display: inline-block; line-height: 1.5; vertical-align: middle; - 给
input设vertical-align: middle; margin-top: -1px;（Chrome/Firefox 下常用） - 针对 IE，加 hack：
margin-top: -2px\9;（仅 IE8–IE11 生效） - 强制统一字体：
label, input { font-family: Tahoma, Verdana, sans-serif; }，避免中文方块字撑高破坏 baseline
真正麻烦的不是怎么写，而是你得同时验证 Chrome、Firefox、Safari 和 Edge（含旧版）——哪怕只差 1px，用户就会觉得“没对齐”。所以别信“一套 CSS 通吃”，优先用 inline-flex，旧环境再单独切版本处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
