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
13eck
13eck2y ago
Flexbox and grid were designed to do that, so…use flexbox or grid. You can center horizontally with
.horizontal-center {
max-width: 10em; /* or whatever size you want it to be */
margin-inline: auto;
}
.horizontal-center {
max-width: 10em; /* or whatever size you want it to be */
margin-inline: auto;
}
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
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
13eck
13eck2y ago
margin: auto; won’t work because of the lack of height on the parent container. There’s no vertical margin to allocate
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
phyrasaur
phyrasaur2y ago
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.
phyrasaur
phyrasaur2y ago
the center of the screen
so like a modal ig
rishit
rishit2y ago
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. ...
Want results from more Discord servers?
Add your server