Centrar un div que mantiene la relación de aspecto cuando hay margen corporal

Andrew Welch tuvo un pequeño desafío CSS el otro día para crear un div normal:

• centrado verticalmente + horizontalmente
• se escala para ajustarse a la ventana gráfica con un margen alrededor
• mantiene una relación de aspecto arbitraria
• Sin JS

Hay un vídeo en ese tweet si te ayuda a visualizar el desafío. El otro día también vi a Paul Bakaus escribiendo en un blog sobre esto, ¡así que es algo que surge!

A Mark Huot se le ocurrió aplicar relaciones de aspecto directamente con width/ heighty crear los márgenes restando de esas dimensiones:

La idea de Amelia Wattenberger es configurar height/ widthy max-height/ max-widthcon unidades de ventana gráfica y centrarlo con el translatetruco clásico:

Eric A. Meyer hizo lo mismo, solo que se centró con flexbox.

Brian Hart usó vminunidades para el tamaño de la relación de aspecto y lo centrado con flexbox:

Benoît Rouleau hizo lo mismo pero usó calc()para los márgenes en una unidad diferente.

A Andrew realmente le gusta el enfoque de Jonathan Melville. La mayor parte está en las clases de Tailwind, por lo que es un poco difícil de entender para mí, ya que todavía no estoy acostumbrado a mirar a códigos como ese.

Andrew dijo que finalmente optó por esa vmincosa, aunque veo que está usando calc()para reiniciar vminunidades entre sí, lo cual no es realmente necesario a menos que, supongo, quieras ver las matemáticas.