Centering a div That Maintains Aspect-Ratio When There’s Body Margin

Programming - Mar 31, 2024

Andrew Welch had a little CSS challenge the other day to make an ordinary div:

• centered vertically + horizontally
• scales to fit the viewport w/ a margin around it
• maintains an arbitrary aspect ratio
• No JS

There’s a video in that tweet if it helps you visualize the challenge. I saw Paul Bakaus blogging about this the other day, too, so it’s a thing that comes up!

Mark Huot got fancy applying aspect ratios directly with width/height and creating the margins from subtracting from those dimensions:

Amelia Wattenberger‘s idea is to set both height/width and max-height/max-width with viewport units, and center it with the classic translate trick:

Eric A. Meyer did the same, only centered with flexbox instead.

Brian Hart used vmin units for the aspect ratio sizing and centered it with flexbox:

Benoît Rouleau did the same but used calc() for the margins in a different unit.

Andrew really likes Jonathan Melville’s approach. Most of it is in Tailwind classes so it’s a smidge hard for me to understand as I’m not used to looking at code like that yet.

Andrew said he ultimately went with the vmin thing — although I see he’s using calc() to subtract vmin units from each other which isn’t really necessary unless, I guess, you wanna see the math.

Previous Next
Copyrights
We respect the property rights of others, and are always careful not to infringe on their rights, so authors and publishing houses have the right to demand that an article or book download link be removed from the site. If you find an article or book of yours and do not agree to the posting of a download link, or you have a suggestion or complaint, write to us through the Contact Us .
Read More