如何在 Mailchimp 自定义 HTML 邮件中可靠地居中图片行

由于主流邮件客户端（如 Outlook、Gmail、Apple Mail）对现代 CSS（尤其是 Flexbox）支持极差，直接使用 display: flex 无法实现图片居中；必须改用语义化表格布局配合内联样式，才能确保跨客户端一致居中。 由于主流邮件客户端（如 outlook、gmail、apple mail）对现代 css（尤其是 flexbox）支持极差，直接使用 `display: flex` 无法实现图片居中；必须改用语义化表格布局配合内联样式，才能确保跨客户端一致居中。 在电子邮件开发中，“写一次、到处运行”是个幻觉——与网页浏览器不同，邮件客户端渲染引擎碎片化严重，且普遍禁用或忽略 CSS3 特性。你原代码中使用的 flex-wrap、justify-content: center 和 align-items: center 在 Can I Email 上明确显示： Outlook（所有版本）、Gmail（Web/iOS/Android）、Yahoo Mail、Apple Mail 均不支持 flex-wrap，绝大多数也不支持 display: flex 的任意值 。这意味着你的样式在 Mailchimp 编辑器预览中看似正常（因其基于 Webkit 渲染），但一旦发送至真实收件箱，CSS 将被静默丢弃，回退为默认左对齐。 ✅ 正确解法：使用语义化 实现兼容性居中 邮件开发的黄金法则是： 用表格布局替代 Flex/Grid，用内联样式替代外部或嵌入式 CSS，用 align 属性和 margin: auto 代替现代对齐方式 。 以下是一个经过全平台测试（包括 Outlook 2013–2021、Gmail Web/App、iOS Mail）的居中图片行示例：