最直接有效的解法是给单元格加 style="vertical-align: middle;"，而非调 margin、line-height 或设 display: block；避免使用已废弃的 align="center" 属性，也不给 input 单独加 margin: auto。
表格单元格里复选框怎么垂直居中
默认情况下，<input type="checkbox"> 在 <td> 里会贴顶对齐，看着歪。最直接有效的解法是给单元格加 style="vertical-align: middle;"，不是调 margin、line-height 或强行设 display: block——后者会让复选框独占一行，破坏表格流。
别用已废弃的 align="center" 属性；也别给 <input> 单独加 margin: auto，它不生效，还可能引发渲染错位。
多列复选框在表格外怎么水平对齐
如果复选框不在表格里（比如筛选条件栏），而是需要横向多列排布（如 4 列），CSS Grid 是目前最稳的选择。传统 inline-block 或 float 在项目数不整除列数时容易错行、间距失控，尤其在不同浏览器下表现不一致。
- 用
display: grid+grid-template-columns: repeat(4, 1fr)明确定义四等宽列 - 用
gap: 0.5em控制项间间距，比手动算margin更可靠 - 每个复选框和对应
<label>套在同一个<div class="checkbox-group">里，避免文本长度差异导致对齐偏移 - 移动端可配合媒体查询改成
repeat(2, 1fr)或1fr，Grid 自动重排
为什么不能靠 text-align: center 对齐复选框
text-align: center 只影响**内联级内容**的水平位置，而 <input type="checkbox"> 默认是替换元素（replaced element），它的“对齐行为”由父容器的 vertical-align 和行高共同决定。单独设 text-align 对它没用，反而可能让旁边的文本居中、复选框不动，造成视觉割裂。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
真正起作用的是：vertical-align: middle（控制垂直）、display: flex + align-items: center（对单组 checkbox+label）或 Grid 的 align-items（对多列布局）。
全选列里多个复选框对齐失效的常见原因
表格里一列全是复选框，但有的高、有的矮、有的偏上——大概率是混用了不同来源的样式或 DOM 结构不一致：
- 某些行的
<td>里套了<div>或<label>，额外盒模型干扰了vertical-align - 部分复选框被设了
height/transform: scale()，但没同步调整行高或对齐方式 - 用了
!important覆盖了全局vertical-align，但只 applied 到部分单元格 - 表格用了
border-collapse: collapse，但某些<td>没设padding，导致视觉高度不一致
统一做法：所有复选框列的 <td> 都加 style="vertical-align: middle; padding: 8px;"，不依赖外部类名或嵌套结构。
