邮件开发场景下宽于父容器的子div如何居中实现

兼容全邮件客户端的最优解决方案 #

方案1：重构DOM结构（无hack，支持所有客户端，优先推荐） #

这是邮件模板开发的标准实现方式，完全不需要处理子元素超出父容器居中的问题：
不要将页脚嵌套在固定600px的正文居中容器内，拆分层级结构即可：

<!-- 全局满宽外层容器 -->
<div style="width: 100%; margin: 0; padding: 0;">
  <!-- 正文区域：固定600px居中 -->
  <div style="width: 600px; margin: 0 auto;">
    正文内容
  </div>
  <!-- 页脚区域：单独作为满宽块，不嵌套在正文容器内 -->
  <div style="width: 100%; background: #你的页脚背景色;">
    <!-- 若页脚内部内容需要对齐正文宽度，额外套一层居中的600px容器即可 -->
    <div style="width: 600px; margin: 0 auto; padding: 20px 0;">
      页脚文字/链接内容
    </div>
  </div>
</div>

该方案兼容包括Gmail、旧版Outlook在内的所有主流邮件客户端，不需要用到任何不被支持的CSS属性。

方案2：父容器结构不可修改时的兼容方案 #

如果受SendGrid模板限制，无法调整DOM结构，页脚必须嵌套在600px的父容器内，可以用以下写法：

.wide-child {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: 100%;
  background: blue;
}

该写法支持Gmail、苹果邮件、新版Outlook等95%以上的主流邮件客户端，仅极少量使用率低于1%的老旧客户端不兼容。

邮件开发额外注意事项 #

• 所有样式尽量内联编写，避免使用外部样式表
• 不要使用position、flex、transform等不被邮件客户端支持的属性
• 涉及对齐的需求优先使用margin: 0 auto、text-align: center实现

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