The question of how to center a css layout in the browser window comes up very often. Seems to show up daily in the webmaster forums I visit and I thought it about time I devote a post to centering web pages that use a css layout. The same technique used to center your entire page will also work to center any block level element within the layout so if you learn it you’ll be able to center anything you want inside your css layouts. It’s also rather simple to learn and use.
Auto Margins For Centering
With table based layouts it was pretty easy to center a page, right? You wrapped a <center> tag around your main table and then aligned each table cell however you wanted. But we’re using css now and that <center> tag has been deprecated from the language anyway. Actually the css way is easier since you won’t have to tell everything inside the page where to align itself. It will still all be aligned to the default left.
With css the way to center anything that’s a block level element is with the margin property. One of the values of margin is auto and by setting auto on the left and right margin our block level element will center itself. For the block level element we’ll typically use a div, but it will work with any other block level element as well. There are two more things we need to add to make this work. One is the use of a proper doctype which we’ll cover in a bit.
The other is a width. Our block level element needs a width applied otherwise it will use the default of 100%. When centering something that’s 100% of the width of it’s containing element it will stretch to the edges of that element. Technically it is centered, but to us it’s just stretched to the edges. As long as you specify a width that’s less than the width of the containing element your block level element will be centered inside its container.
Centering An Entire Web Page
One of the more common things people want to center is the web page itself. To center your page you want to wrap all of your html with a single div (outr block level element) and apply the css to that wrapper div. The containing element for the wrapper div will be the body and so the wrapper div will end up centered within the body of the document. Your html will look something like:
<body> <div id="container"> all of your html for the page </div> </body>
and your css:
div#container {
width:760px;
margin:0 auto;
}
I’ve given the container div an id of wrapper, though any name will do. Here I’ve set the div to a width of 760px which is fairly common when designing for 800×600 resolution and then simply applied the left and right margin with a value of auto using the css shortcut for margin. Now the entire div (which contains all the code for your page) will be centered within the body while all the elements inside the div will still be aligned left. We centered the wrapper, but not the content inside wrapper.
Centering Elements Within The CSS Layout
The same technique can be used to center most anything in your layout. Either the element you want centered will already be a block level element or you’ll wrap what you want to center in a div and center that wrapping div. Let’s say you have a header in your layout that stretches 100% of the document body, but you want to center your company name inside the header div. Just wrap your company name in it’s own wrapper div and use the same css as above to set a width along with our auto left and right margins.
Same for your menu. Perhaps your layout consists of 2 columns with the left column containing a menu built with a simple unordered list. Just as with the page and company name wrap a div around your unordered list, give that div width that’s smaller than the width of the column, and add your auto margins. Your menu will be centered in the left column while the links will still be left aligned within the list. Pretty simple.
Doctypes For Centering
The above code will work without anything else in all standards compliant browsers. Of course we all know there’s one browser that isn’t quite as compliant as we would like. Yep, good old Internet Explorer. Fortunately the fix for IE is something you should be doing anyway, which is using a proper doctype at the start of your document file.
Without a doctype IE goes into what’s called quirks mode and it won’t be able to handle the auto value on the margin property. You really should be specifying a doctype anyway so this isn’t something to necessarily blame on IE. When a browser falls back into quirks mode it just assumes you’re not using valid code and instead some of the poor code that originally made it on the web. The browser will attempt to interpret your mistakes and will correct some things for you. Sounds like it’s doing us a favor, but in truth it just leads to a lot of sloppy code. Many times if you can’t get things to look right in Firefox, but they are looking right in IE it’s because you didn’t specify a doctype. IE is fixing some of your code while Firefox isn’t.
As long as you apply one a proper doctype IE will be fine with the auto value on the margin property and everything will center like expected. If you haven’t used doctypes before now is as good a time as any to start. It will set you on the path to writing better code that validates and improves your skills as a coder.
That’s really all there is to centering your web page and elements in your css layouts. Wrap things in the block level div and apply widths and auto margins. Remember to use a proper doctype as you should anyway and you’re all set. Pretty simple and a lot less code than with tables since you don’t have to reset the alignment on everything.
Download a free sample from my book, Design Fundamentals.
This didn’t work for the website I’m working on.
???
Keir if you post a link to the site or send me a link through the contact form (just click on any tab at the top that’s not the blog to see the contact form), I’ll be happy to take a look.
I know the methods described in the post work. It’s probably something minor that’s keeping things from being centered.
I have tried centering a table relative to the body with left and right margins set to “auto” and that works horizontally. What I had trouble with is centering the table vertically so that when the browser window is changed, the table is still in the middle vertically and horizontally. I tried top and bottom margins set to the “auto” value… didn’t work. So I set top and bottom margins to a percentage value of 15% (after trying larger numbers) and it works in IE and in Firefox. Is there a better way to do the vertical centering, or is what I did legitimate?
Thanks if you can assist.
Jere
PS. why the 0 with the auto value?
Unfortunately margin: auto doesn’t work like you discovered.
At one of the forums where I participate we have a sticky going with links to different methods for centering.
It looks like the general idea behind vertical centering is to first use absolute positioning and place things 50% top and 50% left. That will place the top left corner of your block in the center of the page.
Then you give a negative margin equal to half the width and height of the block you’re trying to center which should leave the center of your block in the center of the page.
There’s more detail in the links in the sticky thread I linked to.
The 0 in the margin isn’t necessary. It’s the auto part that’s important for horizontal centering. I just used 0 here, but you’re free to use anything you want. You can even have the top and bottom margin different.
margin: 10px auto 25px auto
would still center things horizontally.
Thank you for your reply.
I investigated the links you sent and see them solving part of my problem.
What I want is for the element to float, centered vertically and horizontally on the page so that any change in browser dimensions will still have it centered on both axes, relative to the edges of the browser.
Is that possible?
Thanks,
Jere
I have a similar CSS trick to centering an absolute position DIV tag. It is important that people trying these tricks understand the proper use of DOCTYPE declarations and quirks mode rendering in IE. I deal with both of these subject at great length on my blog.
I think there might be an error in your code example.
In the HTML your div has an ID of ‘wrapper’
but
in your CSS you’re setting width and margin on an element with an ID ‘container’
Don’t you want to use one or the other in both the CSS and the HTML??
PS. Great blog with CSS articles that are really well written! I’m reviewing them all even though I’ve been working with CSS for quite a while now.
Thanks Gill. Nice catch on the wrapper/container. I changed both to container so they match like they should. I guess I changed my mind mid-post about which to use.
Appreciate the compliments on the posts too. I hope you find a few articles you enjoy while reviewing.
Thanks for sharing this. Changing the Doctype thing for IE is the next thing I am going to try now.
Thanks Abhijit. Did changing doctypes work for you?
At the very end you talk of wrapping all your content in a container element and centering that. Why not instead just center the body element? It works just as well, and in some circumstances better.
You could definitely use the body element as the main wrapper div. I like included the extra div since I think it gives more control over how the page will look.
I like leaving the body as something that goes from edge to edge in the browser. Maybe it’s just preference. I’m not sure if there are specific reasons for centering with a wrapper div over the body tag or the other way around.
Can you help me to take a look at my website, I’m using a free template, so things are getting a little bit complicated. Can you help me to center the entire web, I tried but the method doesn’t work, thanks. You can view my page source.
I took a quick look and it looks like there are a few different things going on. I probably won’t be able to give you exact code for everything, but I can offer a general approach for how to center the page.
What you want to do is center an outer container that wraps all of your content. You could add an extra div around everything or you can use the body element as the wrapper.
On the body set a width, say 80% and then set the left and right margins to auto. That will center the entire body element and everything inside.
It also looks like some of your contained are either being floated or have positioning applied. You may and probably will need to remove some of these if those containers aren’t also being centered.
Hope that helps.
This works fine in Chrome and IE10 but IE9 is a mess. Is that just IE9? Should I give up?
It should work fine in IE9. When I wrote this post I think we were still on IE6 and it should work on anything that came after. Do you have an example where it’s not working?