必须用display:flex时，HTML Email中替代justify-content实现元素居中

由于HTML邮件客户端对CSS属性的兼容性差异较大，justify-content: center可能在部分客户端失效，结合你必须使用display: flex的要求，可尝试以下几种方案：

方案1：添加浏览器前缀增强兼容性 #

部分WebKit内核的邮件客户端（如iOS Mail）需要添加-webkit-前缀才能识别flex相关属性，修改代码如下：

<div style="display: flex; -webkit-display: flex; justify-content: center; -webkit-justify-content: center;">
  <p>Hello &nbsp;</p>
  <p>World</p>
</div>

方案2：通过容器居中实现整体对齐 #

将flex容器设置为内容宽度，再利用margin: 0 auto让容器本身居中，从而带动内部元素整体居中：

<div style="display: flex; width: fit-content; margin: 0 auto;">
  <p>Hello &nbsp;</p>
  <p>World</p>
</div>

如果width: fit-content在部分客户端不生效，可替换为display: inline-flex并在外层套一个设置text-align: center的容器：

<div style="text-align: center;">
  <div style="display: flex; display: inline-flex;">
    <p>Hello &nbsp;</p>
    <p>World</p>
  </div>
</div>

重复声明display: flex和display: inline-flex是为了兼容不同客户端的解析规则。

方案3：给子元素设置自动外边距 #

若要多个子元素整体居中，可将它们包裹在一个内层容器中，再给内层容器设置自动外边距：

<div style="display: flex;">
  <div style="margin-left: auto; margin-right: auto;">
    <p>Hello &nbsp;</p>
    <p>World</p>
  </div>
</div>

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