复选框垂直居中需对父单元格或设置vertical-align: middle，而非操作本身；全表统一用td, th { vertical-align: middle; }，避免使用已废弃的align属性或text-align解决垂直对齐问题。

复选框默认贴顶，怎么让它垂直居中？

表格单元格默认 vertical-align: top，<input type="checkbox"> 是内联元素，会紧贴单元格上边缘，看着明显偏高。最直接有效的解法是给 <td> 加 <code>vertical-align: middle。

• 不要用 align="center"（HTML5 已废弃）
• 别对 <input> 单独设 margin 或 line-height——容易错位或破坏表格流
• 全表统一处理，写 CSS 更省事：td { vertical-align: middle; }
• 如果只调某列，用内联样式：<td style="vertical-align: middle;"><input type="checkbox"></td>

为什么 text-align: center 不能解决垂直对齐？

text-align: center 只控制水平居中，对复选框这类替换元素（replaced element）的垂直位置没影响。它和 vertical-align 不是同一维度的属性，混用反而可能引发意外交互（比如在设置了 line-height 的单元格里表现异常）。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 垂直对齐必须靠 vertical-align（作用于父 <td>）<li> <code>text-align 可以保留，用于让复选框在单元格里水平居中（但不是必须）
• 若同时写了两者，确保没冲突：比如 vertical-align: middle + text-align: center 是安全组合

position: relative 能不能微调复选框位置？

能，但不推荐作为首选方案。

• 可以给 <input> 加 style="position: relative; top: 2px;" 往下挪，或 top: -1px 往上提
• 问题在于：不同浏览器、不同缩放比例下偏移量不一致；多个复选框偏移值稍有差异就会显得参差不齐
• 更严重的是：一旦表格启用 border-collapse: collapse，相对定位可能让边框错位或重叠
• 真需要像素级控制时，优先考虑统一 vertical-align + 调整 font-size 或 padding，比硬调 top 更稳定

全选复选框和行内复选框对齐不一致怎么办？

表头 <th> 默认 <code>vertical-align: middle，而 <td> 默认是 <code>top，这会导致全选框和行内框看起来不在同一水平线。

• 统一设置：th, td { vertical-align: middle; }
• 别只调 <td> 忘了 <code><th>，否则表头复选框会“浮起来”<li>如果全选框放在 <code><th> 里但用了 <code>rowspan，要确认它所在单元格的 vertical-align 仍生效（rowspan 不影响该属性）

  实际中最容易被忽略的，是把所有精力花在 <input> 上，却忘了对齐行为由其父容器（<td> 或 <code><th>）决定。改错地方，再调十次 <code>margin 都白搭。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！