合并单元格内容不居中是因为text-align和vertical-align仅对单元格内容生效，且易被父级继承覆盖；块级元素需额外设置margin:0 auto或flex布局；应使用属性选择器统一控制样式并配合vertical-align:middle实现垂直居中。

表格合并后内容不居中？先确认 text-align 作用对象是否正确

合并单元格（colspan 或 rowspan）本身不会影响对齐，但容易让人误以为“合并了就自动居中”。实际起作用的仍是 text-align 和 vertical-align，且它们**只对单元格内容生效，不对合并逻辑起作用**。

常见错误现象：<td colspan="3" align="center">标题</td> 看似居中，但 align 已废弃；或加了 style="text-align: center;" 却发现文字还是偏左——大概率是父级容器（如 table 或 tr）设置了 text-align: left 并向下继承，覆盖了当前设置。

• 必须把 text-align: center 显式加在 td 或 th 上，不能只靠父级
• th 默认有 text-align: center，但一旦被 CSS 重置（比如全局重置了 th { text-align: inherit; }），就会失效
• 若合并单元格内嵌套了 <div>、<code><p></p> 等块级元素，text-align: center 只影响其内部文本，不控制该 div 自身位置——需单独给它加 margin: 0 auto 或 display: flex

  text-align 在合并单元格里为什么有时“没反应”？

  根本原因：它只对行内内容起作用，而合并后的单元格如果内容是块级结构，text-align 就只是“摆设”。比如：

  <td colspan="2" style="text-align: center;">
    <div style="width: 200px; background: #eee;">这不会居中</div>
  </td>

  这里 div 是块级元素，默认宽度撑满单元格，text-align: center 对它无效。要让它真正水平居中，得换思路：

  

  Wechat HTML Publisher

  直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

  下载
  • 给 div 加 margin: 0 auto（前提是它有明确宽度）
  • 把 td 设为 display: flex; justify-content: center;，再放 div
  • 用 display: grid; place-items: center; 替代，兼容性更好（现代浏览器无压力）

  整行/整列合并后想统一居中？别重复写 style，用 CSS 类批量控制

  手动给每个 td[colspan] 加内联样式既难维护又易漏。更可靠的做法是定义语义化类名，配合属性选择器精准命中：

  /* 合并标题行统一居中 */
  th[colspan] {
    text-align: center;
    vertical-align: middle;
  }
  /* 所有跨两列的单元格 */
  td[colspan="2"] {
    text-align: center;
  }
  /* 避免干扰普通单元格 */
  td:not([colspan]) {
    text-align: left;
  }

  这样既能保持样式集中管理，又能避免继承污染。注意：[colspan] 选择器匹配任意含该属性的元素，比写死 colspan="3" 更灵活。

  垂直居中必须配 vertical-align: middle，但别指望它“万能”

  vertical-align 只在 display: table-cell（即默认的 td/th）下有效，对 div、span 等无效。合并单元格里若内容高度不均，仅靠 vertical-align: middle 可能仍显偏上或偏下：

  • 单元格本身没有固定高度时，vertical-align: middle 是相对于“行高”计算的，不是相对于单元格可视区域
  • 若内容含图片、按钮等不同 baseline 的元素，建议统一设 line-height 或改用 display: flex; align-items: center;
  • 多行文本垂直居中效果弱？可加 padding-top 和 padding-bottom 手动微调，比强行拉高 line-height 更可控

  复杂点常被忽略：合并单元格的 vertical-align 行为会受所在 tr 的 height 或 line-height 影响，而不是它自己的 height——所以不要只盯着 td 调，得看整行上下文。