复选框与单行文本垂直居中需将父容器设为flex并设置align-items: center，同时重置input的margin: 0；多行文本顶部对齐则用align-items: flex-start；表格内优先用vertical-align: middle配合padding，失效时改用flex；自定义样式时需显式控制尺寸并与line-height匹配。
复选框与单行文本在
默认情况下，<input type="checkbox"> 作为内联替换元素，其基线会和文字首行字母底部对齐，看起来“下沉”——这不是 bug，是 CSS 规范行为。解决的关键是让 <li> 或其直接容器成为 flex 容器，并控制交叉轴对齐方式。
- 给
<li>设置display: flex和align-items: center，这是最直接、兼容性好（IE11+）的方案 - 务必重置
<input>的默认外边距：margin: 0，否则align-items: center会被干扰 - 避免用
vertical-align: middle直接作用于<input>：它在 flex 容器里无效，在普通 inline 流中又依赖行高，不稳定 - 如果
<li>内还有其他元素（如图标、span），建议统一用flex管理，不要混用vertical-align和flex
复选框与多行文本共存时顶部对齐怎么做
当 <li> 里复选框后面跟着一段可能换行的长描述，目标是复选框上边缘与文本第一行顶部对齐（而非基线），这时 align-items: center 会把复选框“抬高”，反而造成错位。
- 改用
align-items: flex-start，确保所有子项（包括复选框和匿名文本节点）沿交叉轴顶端对齐 - 用
gap: 0.5rem控制复选框与文本间距，比margin-left更安全，不触发外边距合并 - 不需要额外包裹文本——浏览器会把连续文本自动聚合成一个匿名 flex item，现代 Chrome/Firefox/Safari 均正确支持
- 若需兼容 IE11，可降级为
display: table-cell+vertical-align: top，但会丧失gap和响应式弹性
表格单元格（<td>）里的复选框怎么居中
表格单元格天然支持 vertical-align，但实际效果常被内容高度或嵌套结构破坏。优先用原生方案，失效时再升级为 Flex。
- 首选：直接给
<td>加vertical-align: middle，配合足够padding（如padding: 8px 12px）提供视觉空间 - 若单元格内有
<div>或<p>包裹复选框，vertical-align就失效了——此时必须把<td>设为display: flex - Flex 方案中，
align-items: center是必须的，同时加min-height: 40px防止内容少时容器塌缩导致居中不可见 - 慎用
!important强制vertical-align：它能覆盖框架样式，但掩盖了真正的问题根源（比如父级 height 被限制或内部块级元素干扰）
自定义复选框样式后对齐容易出问题？
用 appearance: none 隐藏原生复选框后，常通过伪元素或额外标签模拟 UI。此时对齐逻辑完全由你控制，但也更容易失控。
立即学习“前端免费学习笔记（深入）”；
- 隐藏原生控件后，
<input>本身仍占布局空间，建议用position: absolute移出流，再用label::before绘制视觉复选框 - 如果保留
<input>在文档流中，它的尺寸（宽高）必须显式设置，否则align-items: center会因尺寸不可知而计算偏差 - 自定义复选框的宽高最好和字体
line-height匹配（如1em），否则和相邻文字对齐时会出现像素级偏移 - 测试时重点看小字号（12–14px）下是否仍对齐——很多方案在 16px 以上没问题，但移动端小屏下失准
padding、没有 min-height、也没有足够行高，再正确的 align-items 也出不来效果。
