表格居中需给table设margin: 0 auto并配合width；合并单元格不影响整体位置；text-align控制内容对齐，vertical-align控制单元格内垂直对齐；td不支持margin，块级子元素需额外居中处理。

table元素加margin: 0 auto才能让整个表格居中

合并单元格（colspan/rowspan）本身不影响表格在页面中的位置，很多人误以为合并后要“重新居中”，其实只是没给

设居中样式。关键点就一个：margin: 0 auto只对块级元素生效，而默认就是块级——但前提是它没被改成display: inline-table或float。

常见错误现象：合并了单元格，却还在

里写align="center"，或者给

加margin: 0 auto（完全无效，因为td是display: table-cell，不支持margin）。

• 正确做法：直接给加style="margin: 0 auto;"
• 必须配套设置width（如width: 80%或width: 600px），否则auto无剩余空间可分
• 避免父容器有text-align: left且未重置，否则可能干扰内联场景下的视觉判断

text-align: center作用对象是内容，不是单元格本身

合并后的单元格（比如

）内容是否居中，取决于text-align是否应用到该

或其祖先元素。它控制的是文字、图片等行内内容的水平位置，不是把整个

在表格里挪动。

容易踩的坑：在合并单元格里放了一个

，只设了td { text-align: center; }，结果

还是左贴边——因为

是块级元素，默认无视text-align。

• 若内容是纯文本或（默认行内），text-align: center直接生效
• 若内容是
  、

  等块级元素，需额外给它设margin: 0 auto（并声明width）或改用display: flex; justify-content: center
• 整表统一居中：写table td, table th { text-align: center; }，比逐个加style更可靠

vertical-align: middle只对td和th有效

垂直居中不能靠text-align，也不能写在

上——W3C明确禁止vertical-align用于table元素。它只作用于表格单元格（td/th）及其内部的行内内容或表格行（tr）。

合并单元格后，如果内容看起来“偏高”或“偏低”，大概率是没设vertical-align，或被其他CSS（如line-height、padding）干扰。


Wechat Article Html
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
下载
• 推荐统一写：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会从

向下继承到再到本身不渲染，实际生效的是定义列样式时，配合.center { text-align: center; }确实能批量控制，但这个类必须作用于，而不是 + CSS类，或td:nth-child(2) { text-align: right; }
• 按行控制：用tr:nth-child(even) td { text-align: left; }
• 避免用!important强行覆盖继承链，先检查浏览器开发者工具里哪条规则被标记为“已取消”

，但

。如果某列需要右对齐，而其他列居中，光靠table { text-align: center; }不够，得用更具体的选择器覆盖。

复杂点常被忽略：用

——否则无效。
• 按列控制：用

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