Html 启用最大宽度和高度并保持纵横比的中心div

如何使div以最大宽度和最大高度居中，同时保持其纵横比

到目前为止，我的代码以div为中心，但它没有保持6:5的纵横比（高度：宽度）

#主要内容{
保证金：0自动；
宽度：100%；
最大宽度：1200px；
身高：100%；
高度：500px；
背景色：#953d44；
位置：相对位置；
}
#容器{
宽度：80%；
身高：80%；
最大高度：600px；
最大宽度：500px；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
位置：绝对位置；
背景颜色：矢车菊蓝；
}

---

您无法注意到更改，因为主容器本身的高度只有500px。我把它改成了1000像素

运行以下代码段并转到全屏模式，它实际上可以工作

#主要内容{
保证金：0自动；
宽度：100%；
最大宽度：1200px；
身高：100%；
高度：1000px；
背景色：#953d44；
位置：相对位置；
}
#容器{
宽度：80%；
身高：80%；
最大高度：600px；
最大宽度：500px；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
位置：绝对位置；
背景颜色：矢车菊蓝；
}

Research关键字：padding-bottom-hack如果我在容器中添加padding，一些奇怪的东西就会开始出现happening@sanjihan你检查过了吗？你需要用填充物替换高度。如果你想让这个元素不仅仅是一个有背景的正方形，而是把实际的内容放进去，那么你必须绝对地定位内容。使用填充可以忽略max-height。我添加了框大小：边框框。同样的结果。