由于主流邮件客户端（如 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 将被静默丢弃，回退为默认左对齐。
DeepBI DHTML 页面生成器
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力：
- 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面；
- 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”；
- 提及位于 `apps/console/src/featur
下载
✅ 正确解法：使用语义化
实现兼容性居中
邮件开发的黄金法则是：用表格布局替代 Flex/Grid，用内联样式替代外部或嵌入式 CSS，用 align 属性和 margin: auto 代替现代对齐方式。以下是一个经过全平台测试（包括 Outlook 2013–2021、Gmail Web/App、iOS Mail）的居中图片行示例：
<!-- 居中容器：table 设置 max-width + margin: auto -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" style="margin: 0 auto; max-width: 600px; width: 100%;">
<tr>
<td align="center" style="padding: 12px 0;">
<!-- 单行三图：每张图用 inline-block 或 img+text-align -->
<img src="https://placehold.co/125x125/4a5568/white?text=1"
alt="Icon 1"
style="max-width:90%"
height="125"
style="vertical-align: middle; margin: 0 8px; max-width: 100%; height: auto;" />
<img src="https://placehold.co/125x125/4a5568/white?text=2"
alt="Icon 2"
style="max-width:90%"
height="125"
style="vertical-align: middle; margin: 0 8px; max-width: 100%; height: auto;" />
<img src="https://placehold.co/125x125/4a5568/white?text=3"
alt="Icon 3"
style="max-width:90%"
height="125"
style="vertical-align: middle; margin: 0 8px; max-width: 100%; height: auto;" />
</td>
</tr>
</table>
<!-- 第二行（双图）：同样居中 -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" style="margin: 0 auto; max-width: 600px; width: 100%;">
<tr>
<td align="center" style="padding: 12px 0;">
<img src="https://placehold.co/125x125/4a5568/white?text=4"
alt="Icon 4"
style="max-width:90%"
height="125"
style="vertical-align: middle; margin: 0 8px; max-width: 100%; height: auto;" />
<img src="https://placehold.co/125x125/4a5568/white?text=5"
alt="Icon 5"
style="max-width:90%"
height="125"
style="vertical-align: middle; margin: 0 8px; max-width: 100%; height: auto;" />
</td>
</tr>
</table>? 关键实践要点：
必须设 align="center" + style="margin: 0 auto"：双重保障居中（部分客户端仅识别其一）；-
所有样式务必内联：Mailchimp 会剥离
-
避免 div + Flex/Grid：即使加了 !important 也无济于事，客户端根本不解析；
-
图片建议显式声明 width/height：防止 Gmail 自动缩放导致错位；
-
使用 role="presentation"：语义化标记，提升无障碍访问兼容性；
-
max-width: 600px 是安全宽度：适配移动端（多数邮件客户端默认以 600px 为内容区最大宽度）。
? 进阶提示：若需响应式换行（如移动端单列），可结合媒体查询（Gmail 支持有限）或使用 条件注释包裹现代样式，但核心居中逻辑仍应以表格为基础——这是邮件开发不可妥协的底层原则。坚持“表格优先、内联至上、渐进增强”，才能交付真正可靠的跨客户端体验。
立即学习“前端免费学习笔记（深入）”；
