Mailchimp 等邮件平台不支持现代 CSS（如 flexbox），导致 justify-content: center 等样式在真实收件环境中失效；必须采用语义化表格 + 内联样式实现跨客户端兼容的图像居中。
mailchimp 等邮件平台不支持现代 css（如 flexbox），导致 `justify-content: center` 等样式在真实收件环境中失效；必须采用语义化表格 + 内联样式实现跨客户端兼容的图像居中。
在电子邮件开发中，「所见即所得」往往只是幻觉——你在 mailchimp 编辑器中看到的居中效果（基于现代浏览器渲染），与 Gmail、outlook、Apple Mail 等实际客户端的最终呈现可能截然不同。根本原因在于：90% 以上的主流邮件客户端（包括 Outlook Desktop、Gmail Web/App、ios Mail）完全忽略或部分降级处理 Flexbox、CSS Grid、display: flex 及相关属性（如 flex-wrap、justify-content）。你提供的代码中 .row { display: flex; justify-content: center; } 正是典型「编辑器可用、收件端失效」的高危写法。
✅ 正确解法：回归 HTML 邮件黄金标准——语义化嵌套表格（table-based layout），配合严格内联样式（inline styles）和传统对齐属性（如 align=”center” 和 margin: auto）。表格虽古老，却是目前唯一被所有邮件客户端 100% 支持的布局机制。
以下是可直接用于 Mailchimp 自定义 HTML 模块的、经过多客户端测试的居中图像方案：
<!-- 外层容器：限制最大宽度并水平居中 --> <table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" style="margin: 0 auto; max-width: 600px; width: 100%;"> <tr> <td align="center"> <!-- 第一行图像组 --> <table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" style="margin: 0 auto;"> <tr> <td align="center" style="padding: 8px;"> @@##@@ </td> <td align="center" style="padding: 8px;"> @@##@@ </td> <td align="center" style="padding: 8px;"> @@##@@ </td> </tr> </table> <!-- 第二行图像组（2张） --> <table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" style="margin: 0 auto;"> <tr> <td align="center" style="padding: 8px;"> @@##@@ </td> <td align="center" style="padding: 8px;"> @@##@@ </td> </tr> </table> </td> </tr> </table>? 关键实践要点：
- 始终使用 table 替代 div：role=”presentation” 明确语义为「仅作布局用途」，避免屏幕阅读器误读；
- align=”center” + margin: 0 auto 双保险：align 属性在旧版 Outlook 中生效，margin: auto 在现代客户端中兜底；
- 图像必须设 display: block：消除
默认的 inline 基线间隙（baseline gap），防止底部多余空白；
- 显式声明 width/height：避免 Outlook 自动缩放或拉伸；
- 禁用外部/内部
：邮件客户端普遍屏蔽 - 避免 vertical-align、flex、grid、Float 等高风险属性：参考权威兼容性数据库 caniemail.com 实时验证支持度。
? 小结：邮件开发不是网页开发。放弃「优雅的现代 CSS」幻想，拥抱「保守但可靠」的表格布局范式，是保障品牌视觉一致性与用户可读性的唯一路径。每次修改后，务必使用 Mailchimp 的「Inbox Preview」功能，或通过 Email on Acid / Litmus 进行多客户端真机测试——眼见，仍未必为实；唯有实测，方得真知。