Tutorial: Centering a div

by Tim Gallant

Once again, very simple - same idea as the table. Here is the CSS for the gray div that you are looking at:

And in your HTML:

Easy, isn't it?

And, once again, to make sure that Internet Explorer 5 plays nicely:

And, because that has centered the text, you will now need to apply left-align to your table text. So:

This is a fixed-width example. Once again, see Part 2 to look at a fluid model.

Now, chances are that if you are centering an item on a page, you might want to use it to "wrap" all of your page content, so that the whole page looks centered. If you are using absolutely-positioned elements inside your "wrapper," you will need to do one more thing to the wrapper: set it to position: relative; in your CSS. Otherwise, your absolutely-positioned elements will be positioned relative to the body of the page, rather than to your "wrapper" - no matter where they appear in your HTML code. Thus, the above code would now look like this:

One more thing: if you are using a wrapper, make sure you understand the "box model."