How to center a div without flexbox or grid
Hello! I'm doing this first challenge of Frontendmentor.io, and I would like to know how to center that div horizontally and vertically, so that it fits at the center of the screen no matter it's width or height. I'm all ears to hear possible solutions, thanks!!
7 Replies
Flexbox and grid were designed to do that, so…use flexbox or grid.
You can center horizontally with
But vertical centering is a pain in the ass without flexbox or grid. I would advise not trying it if you can avoid it.
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
margin: auto;
won’t work because of the lack of height on the parent container. There’s no vertical margin to allocateUnknown User•2y ago
Message Not Public
Sign In & Join Server To View
Tailwind Play
Tailwind Play
An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.
the center of the screenso like a modal ig
Kevin Powell
YouTube
Best (and worst!) ways to center WITHOUT flex or grid
People like to make fun of how hard it is to center things with CSS, and while we have flex and grid which make it super duper easy these days. Sometimes when someone complains about it, then gets a reply of "it's easy with flexbox", they reply "but what if you can't use flexbox or grid?". It's a dumb reply, but it did get me thinking a little.
...