5 ways to vertically center with CSS

Vertically centering things with CSS used to be a challenge, but now there are so many ways to do it, I show you 5 in under 5 minutes, and this isn't even all of them! If you have any other ways, make sure to leave them in the comments!

The 5 ways I look at in this video are the old school way with a table cell, using position absolute, using flexbox and grid's align-items property, and then using auto top and bottom margins on the child in a flexbox (or grid) parent.

#fiveminutefriday

---

---

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

[obscure_films]

This was awesome I hope this becomes a regular thing.

[WebDevSimplified]

Nice video. I never realized that margin: auto actually aligned items vertically as well in grid and flex containers. I have always used the justify and align properties. Thanks for sharing!

[elrio]

HOURS!!...I spent trying to figure this out! Then I decided to goto youtube, search my problem and found this video. Instantly sorted. Great video, thanking you!

[shardulnalegave]

Great! You have solved the biggest problem in the world.

[JackWutang]

Within the first 2 minutes of this video, I figured out something I was trying to do all day. Thanks!

[alexcubed]

I love that everytime I watch one of your videos I unexpectedly learn something new. I didnt know about place-items untill now :)

[markhackney]

2 weeks into a 6 month Web boot-camp. Your channel has become invaluable to me. Thank you, subscribed.

[jnoah]

I'm sure glad this came along. Sometimes I prefer to watch a short how to video on a specific subject, like this one, when I want a quick refresher. Or when I'm busy on a project and don't have time to watch a long video. Docs first and a videos after.

[pankam]

Ohhh... This video (help) will stay in YouTube FOREVER..!!!
Probably after a few years will have 5million views ...this alone.!!!
Thanks again Kevin Powell ... I use the "table" or the "absolute" positioning mostly because of mobile crossbrowser compatibility (works 100%)

[guerreroricardo]

Bro, your videos are helping me expand my coding syntax. Amazing job!

[georgeelliottphotography]

Wow Kevin, you have done it again. I have trolled through so many videos and they all use absolute, relative and so much coding for something simple....centering text....Relative coding messed up my hamburger menu. So, using flexbox and grid is on the money. Thank you very much. Simple, straight forward and the ext goes exactly where I want.


Please keep up the good work as your 5min videos are awsome.


George

[Pankaj-Verma-]

The most valuable channel for developers on YouTube.

[yodaheabebe]

I just wanna give this guy a big after corona.

[esagecantu]

You blew my mind. It was much needed tip.

[feeham]

These videos will be really good and i will codepen all of them as a quick reference. Keep up the good work Kevin, you doing really good.

[kiliusz]

hours of google browsing and struggling with vertical alignment of items and this guy solved problems in 7min...

[tsmspace]

This is my favorite video so far. I don't know why vertical alignment is so hard for newbies like me.

[chanm]

Fantastic! 5 minutes (not counting the intro) well spent.

[brimcap]

Position: absolute;
Top: 50%;
Left: 50%;
Transform: translate(-50%, -50%);

Hotel: Trivago;

[kevinrichter]

Great introduction of a new segment! I still remember how painful it used to be to vertically center stuff and now the only struggle might be to decide which method you want to pick ;-) 5 minute videos are a great idea btw.