HTML & CSS for Beginners Part 20: How to center a div

Key Takeaways

alright guys super common problem a lot of you guys have websites and you're not sure how to keep something in the middle of it we want something like this instead of something like that and the other thing is when I change the size of the screen here we want it to adjust automatically I don't want to you know you can see in my margins here are changing so we're gonna look at how we can set that up to work properly on your site where it's always keeping the content in the middle and it's not keeping everything fullscreen like that [Music] luckily for us this is a really easy thing to do for this to work we have to add a little bit of HTML just one simple div to fix our problem and what we need to do is we have to have a div that's gonna hold all of our content in the middle of our page with websites we have nothing that defines the size of our page they scroll up and down pretty much to infinity as long as there's content we can scroll and there's no problems there but as far as the left and right goes you know you make a new document in lots of other things they ask us what we want for our dimensions we don't have that so it just fills up all the space so we have to create something that tells it what the dimensions are actually going to be so I'm gonna come in here and create a div class I'm gonna call it container another name you might hear or see people using is called wrapper and then all the way down to the bottom and close that and we'll just indent all this since we're all inside the container so some places you you might see wrapper that's doing the exact same thing as this container is really really popular though you'll see this used a lot for what we're about to do go over to our Styles and all we need to do over here dock container is I want to select my container and first time we gave it a background color just so we can visualize what's going on and I'll just make it white Save oh I forgot to save my HTML file there we go so my container is there and right now it's not doing anything yet it just has a white background to it and it's holding all of my content what I want is you next though is I want to give it a width so let's say my width is 600 pixels and now I have a white box that's 600 pixels and no matter what I do it's always 600 pixels the problem is it's stuck over on the left side over here it's not automatically adjusting to anything it's just it's staying on the left which makes sense HTML and stuff always starts on the left so I want to put it in the middle now this is where the little nice trick comes in and what it is is I want my margin left to be Auto and I want my margin right to the auto you can't use this trick anywhere you want this is a special thing it only really works when the left margin and the right margin or Auto you can't do this from margin top and margin bottom it's only margin left and margin right and what it's going to do is it's going to make sure the margin on the left and the margin on the right are always exactly the same so when i refresh voila it's in the middle and if I make this bigger it stays in the middle and if I make that smaller it stays in the middle so no matter what I do it's always in the middle so that's really fun and cool now we can take this a little bit of a step further one thing just to make it easier for you what you usually see this written as is margin zero space Auto so zero pixels top and bottom and auto left and right so just margin:0 auto this is the magic sauce this is what keeps your div or your container in the middle of the page so right away this is the big takeaway from this video a couple of other things we can do to fancy it up a little bit though right now my width is locked in at 600 pixels and that looks fine right now but it's really tiny over here so one thing you could do instead of putting pixels is I could use percentage so say I did 70% and this is what I used at the beginning of the video for when I was demoing it but we'd never wait back around so it's always going to be 70% of the total size so it's gonna grow and it's gonna shrink along with my window but these spaces are going to automatically adjust also so right now the spaces are still bigger and they get smaller yeah so that's a nice one there and the last last other thing that we will add into this is something called max width so my width is 70 pixels but I'm gonna say a max width of 1000 pixels so what this does it means I'm gonna save that and refresh so I have my width of 70% of the total screen it has my margin:0 auto to Center it but now if I'm on a small screen it's perfect and it's gonna go and go and you can see right here it stops growing this box has now hit a width of a thousand pixels so instead of being 70 percent we're saying it always be 70 but stop at a thousand so it can't get bigger than a thousand pixels so it will shrink down it will grow and then it will stop at a thousand pixels so we can sort of limit a little bit the total size of our layout and that's it nice and short and sweet thanks a ton for watching I hope you learned something with this one and I'll see you in the next video