邮件开发：如何让响应式背景Div内的图片按钮始终居中？

嘿，我太懂这种邮件开发里的头疼事了——明明在电脑上看着好好的，换个手机或者不同邮件客户端，按钮就跑偏了！咱们来一步步解决这个问题。

为啥按钮会跑偏？ #

大概率是你用了固定的margin、left或者top值来定位按钮，但背景图是跟着容器缩放的（因为你用了max-width），按钮的定位没跟着动态调整，自然就偏离中心了。而且邮件客户端对CSS的支持特别挑剔，很多Web端好用的方法在邮件里会失效。

两种靠谱解决方案（覆盖新老客户端） #

方案1：Flexbox（适合现代邮件客户端）

这种方法简单直接，只要你的目标用户用的是Gmail、苹果邮件、Outlook 365这类现代客户端，直接用Flex布局就能搞定：

div.container {
  background: url('你的背景图地址') no-repeat center center;
  background-size: contain; /* 想让背景图铺满容器就用cover，保持比例就用contain */
  max-width: 600px; /* 你的容器最大宽度 */
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  /* 重点！必须用padding撑开容器高度，因为背景图不会自动撑高容器 */
  /* 数值根据背景图的宽高比算，比如背景图是600px宽、300px高，就设上下padding各150px */
  padding: 150px 0;
}

div.container a.button {
  /* 按钮样式，不用再写定位相关的代码了 */
  padding: 12px 24px;
  background: #007bff;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
}

原理很简单：background-position: center center让背景图始终在容器里居中，Flex布局直接把按钮钉在容器的正中心，padding保证容器高度和背景图比例一致，缩放时按钮和背景图的中心永远对齐。

方案2：表格布局（兼容老邮件客户端，比如Outlook）

如果要兼容老版本Outlook（尤其是Windows上的桌面版），表格是邮件开发的“万能救星”，因为它对所有客户端的支持都最稳定：

<table class="container" cellpadding="0" cellspacing="0" border="0" width="100%">
  <tr>
    <td 
      background="你的背景图地址"
      style="background-size: contain; background-repeat: no-repeat; background-position: center center; padding: 150px 0; text-align: center;"
    >
      <!-- 给Outlook加的VML fallback，不然它不认background属性 -->
      <!--[if gte mso 9]>
      <v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="border: 0; display: inline-block; width: 600px; height: 300px;" src="你的背景图地址" />
      <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="border: 0; display: inline-block; position: absolute; width: 600px; height: 300px;">
      <v:textbox inset="0,0,0,0">
      <![endif]-->
      
      <a href="#" class="button" style="padding: 12px 24px; background: #007bff; color: #fff; text-decoration: none; border-radius: 4px; display: inline-block;">点击按钮</a>
      
      <!--[if gte mso 9]>
      </v:textbox>
      </v:rect>
      </v:image>
      <![endif]-->
    </td>
  </tr>
</table>

这里的关键是：用<td>的background设置背景，text-align: center让按钮水平居中，padding撑高容器匹配背景图比例，同时加了VML代码专门给Outlook用，确保背景图能正常显示，按钮不会跑偏。

避坑提醒 #

• 别用position: absolute定位按钮！邮件客户端对绝对定位的支持极差，尤其是移动端，很容易出问题。
• 一定要保证容器的padding比例和背景图的宽高比一致，不然缩放时容器和背景图的比例会脱节，按钮还是会跑偏。
• 测试一定要用真实的邮件客户端！别只在浏览器里看，Gmail、苹果邮件、Outlook这些都要测，或者用邮件服务提供商的测试工具。

内容的提问来源于stack exchange，提问作者Kevin Chin