具有纵横比的居中 Div，即使存在 body 边距

Andrew Welch 之前 有一个关于 CSS 的小挑战，要求将一个普通 div

• 垂直 + 水平居中
• 缩放以适应视窗，周围留有边距
• 保持任意纵横比
• 无 JS

该推文中的视频可以帮助您直观地了解挑战。我看到了 Paul Bakaus 撰写的关于此内容的博文，所以这是一个经常出现的问题！

Mark Huot 巧妙地利用 width/height 直接应用了纵横比，并通过从这些尺寸中减去创建边距。

Amelia Wattenberger 的想法是使用视窗单位设置 height/width 和 max-height/max-width，并使用经典的 translate 技巧将其居中。

Eric A. Meyer 做了 同样的事情，只是使用 Flexbox 而不是 translate 来居中。

Brian Hart 使用 vmin 单位进行纵横比调整大小，并使用 Flexbox 居中。

Benoît Rouleau 做了 同样的事情，只是使用 calc() 以不同的单位计算边距。

Andrew 非常喜欢 Jonathan Melville 的方法。大多数代码都在 Tailwind 类中，所以我不太理解，因为我还没有习惯看这样的代码。

Andrew 说他最终 选择了 vmin 方法 - 虽然我看到他正在使用 calc() 从 vmin 单位中减去，除非你想看到数学计算，否则这实际上没有必要。