Question

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

I have read multiple ways for centering content on a page using CSS. I am not talking about text, I am talking about content like images or a container etc.

What is the best way for centering content?

Setting the width of the box then using something like left: 50%?

I have read many many ways and really it gets confusing trying to understand which method truly works the best and is cross-browser friendly and works in older browsers.

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

Thanks!

Answer 1

Centering a div:

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

The Css:

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

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

the margin: 0 auto; sets the left and right margin to whatever pixel left on the left and right of the page.

forexample if the width of the page is 800px, the margin left will be 100px and the right also 100px, moving the 600px at the center of the page