Top 3 Ways to Center a DIV with CSS #Shorts

How do you center a div with CSS? Top 3 ways to answer this age old question.

#css #webdev #shorts

[willianvinagre]

Never thought humanity could finally solve such a difficult and complex problem that torments every aspiring web developer

[chadkrause]

“The most difficult thing a web developer ever has to do is center a div” truer words have never been spoken

[ninjaasmoke]

I freaking love these shorts, please don't stop

[itsbk]

I thought this was one of the millennium prize problems. This is truly a testament to how fireship is built different

[weeb]

"It's just that simple"
Yeah I'm not falling for this April's fools prank.

[lynnlo]

This was exactly what I was looking for, how did you see my search history?

[danielhuang]

Hey, I'd just like to point out a slight inaccuracy with the animation of the div with the position: absolute method - when you set a top and left value of 50%, you're moving the **top right corner** of the div directly into the center of the parent element; the % used in top and left refers to the size of the parent container.
The % in the translate function refers to the size of the element which it's acting upon, so by moving it back by 50%, you're moving its center to the location of where its top right corner used to be. Hope this helps the method make a bit more sense!

[refeals]

I remember "discovering" the position thing on my own back in the day. Felt so wrong and so right at the same time. It's awesome to see flexbox and grid becoming more and more standard these days.

[pixiedev]

Can't imagine this big problem has solved in 30 sec. 😃 we want more like this 👏

#fireship #fireshipio #thanks

[abelbelmond-jtur]

And it popped in front just when I needed most...thanks Jeff....you're the best....

[darkalpha]

I searched it for almost 2 hours, and finally got redirected to this video. Thanks Dude 👍👍!
.

[robby]

This is perhaps the best 36 sec Video on YouTube ever XD

[sayeghjoe]

I love your video style. Succinct. Informative. No bloat. No filler.

[aykborstelmann]

I really appreciate these shorts, they are making my day just a little better.

[MrFuckYU]

Another short I like to do:

body {
display: flex;
height: 100vh;
}

div {
margin: auto; (when flex is ON, auto becomes a beast)
}

[derpitscher]

First thought: Delivered ON POINT. NICE.
Second thought: It‘s April 1st...
😅

[Ninetieth]

Please a full grid tutorial, if there isn’t already one 😅

[IkeVictor]

this short is exactly the type of content web devs need....when I'm looking for copy pasta solutions or just looking to understanding certain concepts, I tend to look for the most CONCISE content that's humanly possible. 36 secs is quite impressive lol

[lijemmu]

May the lord bless you for coming in clutch and helping me with exactly what I needed help with

[nattmrls]

I'm searching this since forever. Thank you very much