Centering content with CSS only?

Question

Possible duplicate:
How do you easily center <div> horizontally using CSS?

I read several ways to center content on a page using CSS. I am not talking about text, I am talking about content, like an image or container, etc.

What is the best way to center the content?

Setting window width using something like left: 50%?

I read a lot of different ways, and actually it gets confused, trying to figure out which method really works best and is cross-browser compatible and works in older browsers.

Any ideas on what is truly the best and most effective way?

Thanks!

Answer 1

Centering div:

<div class="pageContainer"> The awesome content is here <div> the secret of life....</div> .... more content .... </div> 

Css:

 body { width: 100%; } .pageContainer { width: 600px; margin: 0px auto; } 

this will horizontally center the 600px div on the page.

margin: 0 auto; sets the left and right margins to any pixel to the left and right of the page.

For example, if the page width is 800px, the rest of the margin will be 100px and 100px on the right, moving 600px to the center of the page