如何在邮件模板中居中<tr>内的单个表格单元格？

阿华AIGC实验室

2026-5-27

邮件模板中实现单个表格单元格居中的可靠方案

嘿，在邮件模板场景里搞表格居中可不能只靠普通网页那套CSS，毕竟像Outlook、Gmail这些客户端对CSS的支持差异超大。要让里的单个单元格不管上下加多少其他单元格都保持居中，这里有几个经过实战验证的方法：

方法1：用HTML表格原生属性（最兼容，首推！）

邮件客户端对HTML表格的原生属性支持度远高于CSS，这个方法几乎能适配所有邮件客户端：
给包裹目标单元格的内层<table>加align="center"，让整个内层表格在外层单元格里居中；同时给目标<td>加align="center"（水平居中）和valign="middle"（如果需要垂直居中的话）。

修改后的代码示例：

td { 
  border: 1px solid blue; 
  padding: 50px; 
} 
.center { 
  padding: 0; 
}

<table id="main">
  <tr>
    <td>
      <table>
        <tr>
          <td></td>
          <td></td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>
      <!-- 让内层表格整体水平居中 -->
      <table align="center">
        <tr>
          <!-- 让单元格内容水平+垂直居中 -->
          <td class="center" align="center" valign="middle">center me please</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>
      <table>
        <tr>
          <td></td>
          <td></td>
        </tr>
      </table>
    </td>
  </tr>
</table>