HTML电子邮件CSS：以表格和表格内容为中心，最受支持的解决方案

我正在准备邮件的html文件。我用的是表格，tr，td标签。到目前为止，我的html的全部内容都放在一个表中，包括一个单元格中的另一个小表（见下图）。我希望整张桌子始终显示在中间。我也想把小桌子放在单元格的中间。外桌的宽度是固定的。 我试着在CSS中输入：

margin-left: auto;
margin-right: auto;

及

，所有这些我都在这里找到了。预览看起来不错，上传到邮件群发系统后的预览也可以。但发送后，中心根本不显示（Gmail中的内部表格也根本不显示，只显示内容）。因此，我正在寻找最常用、最广泛使用的HTML属性，它很可能在每个浏览器/邮件客户端中间显示表。或者，获取有关类属性可能错误使用的建议

我的整个部分：

<style>
table, th, td {
    border-collapse: collapse;
    font-family: Verdana, sant-serif;
}

th, td {
    padding: 15px;
    text-align: left;
}

.main {
    width:1000px;
    border: 5px solid #114889;
    margin: 0px auto;
}

.inside {
  width: 500px; 
  border: 1px dotted #0000CC;
  background-color: #CCE5FF;
  text-align: center;
  font-size: 10px;
  margin: 0px auto;
}
    
</style>

表，th，td{
边界塌陷：塌陷；
字体系列：Verdana，sant serif；
}
th，td{
填充：15px；
文本对齐：左对齐；
}
梅因先生{
宽度：1000px；
边框：5px实心#114889；
保证金：0px自动；
}
.里面{
宽度：500px；
边框：1px虚线#0000CC；
背景色：#CCE5FF；
文本对齐：居中；
字体大小：10px；
保证金：0px自动；
}

我不是这个话题的专家，所以我为使用错误的术语道歉

编辑： 在Outlook中显示。除了左对齐外，一切正常：

显示在Gmail中。没有任何表格： 试试这个

.parentTable {
  position: relative;
}

.childTable {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

---

Outlook仅适用于表，因此您从这个角度来处理它是正确的。然而，一些Gmail环境甚至不看嵌入式CSS（CSS在

部分）。您需要“内联”CSS（）

要在Outlook中居中放置表格，请使用

元素上的属性align，如下所示：

。您可能还需要使用

…

，将其全部包装起来，即使该标记已被弃用（是的，电子邮件已经很旧了！）

您会发现Outlook通常支持属性，例如边框颜色，

，而其他的则支持内联样式，例如

。您应该同时使用两者，而不是依赖嵌入式CSS

---

如果您需要，我可以在发布受影响的HTML后进行更具体的更新。

您是否使用

flex-box

进行了尝试？e、 g.

显示：flex；对齐项目：居中；证明内容：中心

使用

align items

进行垂直对齐，使用

justify content

进行垂直对齐。@不幸的是，michaelT flex不适用于邮件css:/I认为您应该在标题中指定它用于邮件。电子邮件的CSS非常不同，它有自己的规则和功能experts@CristianTra哦，我不知道。谢谢你，我编辑了标题，奇怪的是Gmail根本没有显示表格——或者可能没有边框？你能展示那部分的HTML代码吗？谢谢。我是否将这些属性添加到.main和.inside类中（根据我的代码），而不是

margin:0px auto并保持其余属性不变？当我这样做的时候，文件变得疯狂。或者我应该单独添加这些类，然后在代码中以某种方式指向它们吗？我对课程还不是很精通，没有问题。我认为您可以将parentTable css属性带到主类，将childTable css带到类内。试试看。这不对，不适用于电子邮件。他们拥有非常有限的CSS子集support@KRISHJACKMAN，谢谢您抽出时间！不幸的是，它不适用于我的电子邮件：（非常感谢您的建议！我回到了内联css。首先，我在我的两个类描述中添加了
align:center；
。我还在每个
元素前后添加了
..
标记。然后我使用了内联工具。在Outlook和Gmail中都非常有效！首先尝试一下（只有内联css，但没有添加居中工具）图形不起作用（令人惊讶），但当我应用您的所有建议时，它确实起作用了…？无论如何，最终结果很好，谢谢！
.parentTable {
  position: relative;
}

.childTable {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}