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!
I was so happy when I found out that margin: auto worked like that for flexbox and grid. The fact that margin top and bottom: auto were different in behaviour from left and right is crazy to start with, this makes a lot more sense. It also lets you pull off some cool things if you have multiple things stacked inside of a flex or grid parent.
I'm pretty sure most of us discovered that by accident! :p Another great (upcoming) feature is that according to the CSS Box Alignment Module level 3 specification, align-content should work on the block axis of block containers and multicol containers just like it does in grid and flex, so that will make for ease alignment in the most "traditional" layouts.
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.
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.
the old school way is to put align="center" inside the div tag and another way is with css, width: 90%; and margin: auto; but I like your style much better. I'm trying to catch up with the modern ways of doing this without relying on bootstrap.
TY KEVIN!! Vertical centering is the bane of my existence. i never know WHERE to apply this styling! do i apply it to the container in which i want the content centered? or, do i apply it to the inner stuff? I get so confused. so, i snitched your "grid" thingy, and slapped it into my css, and voila - it works. many thanks. wish to heck i knew what i was doin wrong tho! i'd love to show you my stuff, but, most of my css is embedded in perl code.
Thank you! I love this video, I learned something new and I appreciate it a lot! I took notes for my future projects. Love your videos. Thanks again :)
Thanks,Thanks,Thanks,Thanks,Thanks,Thanks,Thanks,Thanks,Thanks,Thanks and unlimited gratefulness. It was very helpful. It was mind-blowing. Please keep uploading this kinds of smartest and highly useful videos And you are also mind-blowing.
I have tried to solve this as a beginner half a day , if there can be more short videos like this people like me save a lot of time going through long videos and getting the intel they need real quick. thanks for the video.
It's hard for me to work with the font-size so big, but I know the pain of trying to watch coding videos on a small screen, so I'll continue suffering through it :P
In the example of absolute positioning centering is not quite right because you used text-align: center in body element and that was the only reason why text in .absolute p was aligned center - horizontal :D I was very confused why text was centered even so you did not centered it, I figured it out that your other selectors was the reason of it but took me quite some time to find it was in body tag , although it was very good tutorial learned few useful things.
12?! Hah, putting me to shame (though I wouldn't be able to do that in 5-minutes :P). Send me the link when it's up and I'll add it to the description of the video!
Kevin Powell awesome. Yup, some really old stuff there (like the ghost element method) and variations on the flex and grid techniques. Still most will always just use the good old top 50% translate -50%.. that's a classic that will never go away.
Great tips! It would be awesome if you could include a browser version support chart at the end of your videos... personally, i try to avoid considering a feature or style as "old school" until the new school ways are 100% supported. Thanks for the videos.
I have a video coming out just about browser support, but you have to wonder if anything will ever be 100% supported! Even border-radius isn't! I would prefer to link in the description though, rather than include it in the video, because a year from now the screenshot I have in my video would be out of date. Don't let new things scare you off though. Just because something isn't supported doesn't mean we can't use it. Grid is being used in production by large companies today, as are many other more modern things. There are simple ways that we can work and ensure that people still have a good experience even if what we are doing isn't perfectly supported.
I really like this, but not the time limit. I have never understood with, it's not like the old days of SMS eh :) So what if it takes 8 minutes, the more the merrier in my book - Cheers Kevin
Currently, As a beginner, it's staggering how many ways there are to solve the same problem. It's also hard to know what way is best to implement. Pros, cons, and gotchas would help, though maybe in a bit longer format than 5 mins. Thanks
Great point Ian! It's great that we can do it so many ways, but yes, totally overwhelming too. As a general rule of thumb, I'd use the flex one as the default choice these days (or grid if your project is using grid), and then the position absolute one where the flex option can't work for some reason. But yup, totally might do a more in depth video on this!
I would totally love a more in-depth video from you since you explain things so clearly! Thanks for making these videos and keeping them free to watch.
And how to vertically align 3 divs with 2-3 divs inside of each one of them? I did try with flexbox and it's not working sadly . Not sure why . Can you help please ?
The flex/grid box method is the only sensible one here. Changing block level elements into inline elements or changing elements into table cells is just dumb, then you better stick with using tables as layout and put the valing="middle" property in the td element.
I still use the position: absolute one with transforms on it quite regularly. Seems like we wouldn't have to with flex and grid, but it comes up as a useful solution often enough that I'm very happy to know it :)
If you had issues with centering your element using the second method(absolute positioning) despite doing exactly what Kevin did, all you need to do is to remove the margin of the paragraph element ie .absolute p{ margin: 0; }
When the content is img i always have problem center it, flex just break the aspect ratio of the image and i dont want to set the width and height together because the images might have different aspect ratio. Any suggestions?
using 'align-self: center' on the image should work with flex. Flex defaults to 'align-items: stretch', which can stretch images, so yes, we usually need to change that behaviour :)
That's cool! Can I just ask you something? I'm learning CSS like a 3 months and a lot of your videos you use Sass.. Can I learn Sass with CSS at the same time?
You can! I'd say to be moderately comfortable with CSS first though, there are a few things that Sass makes really easy to do, which can build a few bad habits along the way, so to be careful with that. But I don't see why not, at the end of the day, you're just adding some extra functionality on to CSS. Might make the learning curve a little steeper, but it's easy enough just to add a few basic things to start with.
I'd believe they'd all be just as performant. Flexbox has wide enough support that, except for some edge cases, it's probably the best bet at the moment, and if you don't mind pushing things a little (or building in a fallback), grid support is actually pretty high.
I'd believe they'd all be just as performant. Flexbox has wide enough support that, except for some edge cases, it's probably the best bet at the moment, and if you don't mind pushing things a little (or building in a fallback), grid support is actually pretty high.
I'd believe they'd all be just as performant. Flexbox has wide enough support that, except for some edge cases, it's probably the best bet at the moment, and if you don't mind pushing things a little (or building in a fallback), grid support is actually pretty high.
Oh, I forgot about that. I used to do that. The problem with it is, it relies on something being a fixed height, but basically, if you have one line of text, you can center it vertically by making the line-height be equal to the height.
