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.
Check out the codepen here: https://codepen.io/kevinpowell/pen/NLEjaz
And, if 5 ways isn't enough, Facundo Corrandini has come up with 13 different ways! Check out his article, there are some real gems! https://blog.logrocket.com/13-ways-to-vertical-center-in-2018-cb6e98ed8a40
I have a newsletter! https://www.kevinpowell.co/newsletter
New to Sass, or want to step up your game with it? I've got a course just for you: https://www.kevinpowell.co/learn-sass
My Code Editor: VS Code - https://code.visualstudio.com/
How my browser refreshes when I save: https://youtu.be/h24noHYsuGc
Support me on Patreon: https://www.patreon.com/kevinpowell
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.
Tags: 5 ways to vertically center with CSS, Kevin Powell, tutorial, html, css, vertically center css, vertically center with css, vertically center css grid, vertically center flexbox, vertically center position absolute, five minute friday