表格居中需给table设margin: 0 auto并配合width；合并单元格不影响整体位置；text-align控制内容对齐，vertical-align控制单元格内垂直对齐；td不支持margin，块级子元素需额外居中处理。
table元素加margin: 0 auto才能让整个表格居中
合并单元格（colspan/rowspan）本身不影响表格在页面中的位置，很多人误以为合并后要“重新居中”，其实只是没给<table>设居中样式。关键点就一个：margin: 0 auto只对块级元素生效，而<table>默认就是块级——但前提是它没被改成display: inline-table或float。
常见错误现象：合并了单元格，却还在<td>里写align="center"，或者给<td>加margin: 0 auto（完全无效，因为td是display: table-cell，不支持margin）。
- 正确做法：直接给
<table>加style="margin: 0 auto;" - 必须配套设置
width（如width: 80%或width: 600px），否则auto无剩余空间可分 - 避免父容器有
text-align: left且未重置，否则可能干扰内联场景下的视觉判断
text-align: center作用对象是内容，不是单元格本身
合并后的单元格（比如<td colspan="3">）内容是否居中，取决于text-align是否应用到该<td>或其祖先元素。它控制的是文字、图片等行内内容的水平位置，不是把整个<td>在表格里挪动。
容易踩的坑：在合并单元格里放了一个<div>，只设了td { text-align: center; }，结果<div>还是左贴边——因为<div>是块级元素，默认无视text-align。
立即学习“前端免费学习笔记（深入）”；
- 若内容是纯文本或
<img>（默认行内），text-align: center直接生效 - 若内容是
<div>、<p>等块级元素，需额外给它设margin: 0 auto（并声明width）或改用display: flex; justify-content: center - 整表统一居中：写
table td, table th { text-align: center; }，比逐个加style更可靠
vertical-align: middle只对td和th有效
垂直居中不能靠text-align，也不能写在<table>上——W3C明确禁止vertical-align用于table元素。它只作用于表格单元格（td/th）及其内部的行内内容或表格行（tr）。
合并单元格后，如果内容看起来“偏高”或“偏低”，大概率是没设vertical-align，或被其他CSS（如line-height、padding）干扰。
- 推荐统一写：
td, th { vertical-align: middle; } - 慎用
line-height强行撑高——它会让多行文本错位，优先调padding或min-height -
vertical-align对Flex/Grid子项无效，一旦给td设了display: flex，就得用justify-content/align-items替代
合并单元格时text-align继承关系容易被忽略
表格里text-align会从<table>向下继承到<tr>再到<td>，但<tr>本身不渲染，实际生效的是<td>。如果某列需要右对齐，而其他列居中，光靠table { text-align: center; }不够，得用更具体的选择器覆盖。
复杂点常被忽略：用<col>定义列样式时，<col class="center">配合.center { text-align: center; }确实能批量控制，但这个类必须作用于<col>，而不是<td>——否则无效。
- 按列控制：用
<col>+ CSS类，或td:nth-child(2) { text-align: right; } - 按行控制：用
tr:nth-child(even) td { text-align: left; } - 避免用
!important强行覆盖继承链，先检查浏览器开发者工具里哪条规则被标记为“已取消”
