5 ways to vertically center with CSS

hey Kevin here and I get to welcome you today to the very first five-minute Friday now this is inspired by a youtuber I love Peter McKinnon he does mostly like filmography videography and just vlog type stuff really awesome channel and he does a thing called two minute Tuesday's and I really love those and it inspired me and it's something that I wanted to do I've always wanted to make shorter videos so I think by doing this I'm committing to making shorter videos the thing is two minutes that's short when I committed to doing shorter videos I went from like 45 minutes of 20 so you know I don't know if I can get to two so I'm gonna do five minutes or less that means some of these videos might actually end up being less than two minutes but as long as I keep it in my goal of getting the tutorial done in under five minutes I've hit my goal as for the tutorials themselves what I'm gonna be talking about mostly CSS tips tricks and fun stuff we can do occasionally there will be some j/s because you guys are just always clamoring for it but the focus of it will be CSS stuff and speaking of CSS stuff today's video in today's video we're gonna be looking at how we can vertically Center stuff in CSS there's a bunch of ways to do it now in the old days it wasn't so many and it could be really hard and when you finally figured it out then all of a sudden this whole responsive thing came around and that just threw everything out the window because it would resize and it wasn't centered anymore and it was a pain in the butt but these days it's gone so much easier and it's gotten so easy I thought of five different ways that we can do it so let's start that timer and get this started alright so we are here in code pen so the link to this will be in the description below if you want to come in here and play with it yourself now the first one we're gonna be looking at here is the table this is the old-school way of doing it so to do this I have a class on there of table and on my table here I can give this just a display of table so we can get anything to act like a table it doesn't actually have to be a table so I have my div there is my table and now I can say that the paragraph inside of my table is actually a display table-cell so it's gonna act just like a table sale and that opens up the vertical vertical a line of mmm and that we can set to middle and just like that I am vertically aligned now this is a really old school way of doing it so we probably don't want to be using it but this reminds me of one of the first ways we would do it nowadays though there's a lot better ways of doing it one of them is with absolute positioning so I'm just gonna scroll down here a little bit and we can take a look at doing it with that so I mean your dot absolute and on here what I need to do is a actually we'll skip that for a second and we have my absolute peak and so on here I can do a position of absolute and top of say 50% the only problem is it's disappeared because it's going to 50% of my body so on my absolute here on the parent I'm gonna give this a position of relative to fix that if you're not too familiar with relative and absolute positioning I do have a video that talks a little bit more about those now this does present one issues it's not actually perfectly centered so one thing I'm gonna do here is just let let's just do a width of 100% to keep it right in the middle that way but it's actually off on the up and down a little bit so what we can do here is add in a transform of translate Y minus 50% and that pulls it up on its own width so this is dealing with the width of the parent and this is on its own width just to get it right there perfectly in the center I know if we keep on going we have a flexbox one here now flexbox was the first one that really started making things super easy to do so I'm there's more than one way to do this with flexbox but we're going to take a look at the simple one which is a display of flex a line items center and it's vertically centered now it's not taking up the full width so we had that same issue we could also do with justify item Center on this and fix that and justify items justify content and get that centered like that I could also give it back a width of a hundred percent similar to what I did up here on that one another way we can do it is if we come down here I have a grid one so with this instead of what we just did I can do a my grid and display of grid and we can do in a line item so many actually we can do the same thing Center and justify content Center or you can see we didn't even actually need that this time another thing you can do to perfectly Center something with a grid is place items Center and look at that one line gets you there so a little bit faster than when we were doing with the Flex box here well place items is actually just a shorthand for a line items and justify items I believe it is so this is a shorthand for the two properties but you can use that to nicely place something in the middle of a grid parent the nice thing with Flex box and grid compared with these is you don't have you know on my table I also had to do something on the child on this one I also had to do something on the child to get it to fit so we're playing with both of them with these solutions I can just stick with that but there is another solution which is with margins this works with whether you're using your grid or your flex box so I'm gonna do is buy grid on here this one I do need to use my child for though but margin P and I can just do a margin of auto on here and on grid and with flexbox Auto margins on the top and bottom of something will Center it in that space this is something that didn't exist before so if you're doing it on a regular block level element and that will not work but on a the child of a grid or flexbox if I change this to display flex it's still going to work which is a really nice cool trick that you can use and sometimes I just find that a little bit easier because it's just one thing I want to pop right in the center there are other options in this that you can use align itself or something like that but we're running out of time so there we go there you have it the first five-minute Friday I hope you liked it we got plenty more of these coming got lots of quick ideas tips tricks and just fun things we can be doing if you can think of another way to vertically Center it please leave it down in the comments below there are other ways that you can probably pull it off as well that I didn't mention here if you liked the video please hit the thumbs up if you haven't yet subscribed please consider subscribing and of course until next time don't forget to make your corn in the internet just a little bit more awesome

Channel: Kevin Powell

Views: 163,172

Keywords: 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

Id: qJVVZYTYA9U

Length: 7min 1sec (421 seconds)

Published: Fri Sep 21 2018