Centering a style sheet

Hi Jen,
This topic should help: [url]http://www.csscreator.com/css-node/308url]

Hi Jen,

first of all, you should put all your website-elemenst into one wrapping-div.
Let's just call it #wrap.

If you only want to center div#wrap horizontally, you should set the left and right margins on "auto". Looks like:

#wrap {width: 400px; margin-left: auto; margin-right: auto; margin-top: 20px; }

If you want it centered both horizontuically and vertically, it's like that:

#wrap {
position: absolute;
left: 50%;
top: 50%;
width: 500px;
height: 400px;
margin-left: -250px;
margin-top: -200px;
}

The trick is dairly simple: First of all you position the wrapping div absolutely. With the relative measures of each 50% from left and top, the DIVs left-top-corner is situated right in the middle of the page. But that's not exactly where you want it. So now you must tell the browser the exact dimensions of your box [which was not the case in the first example, whre onle the width was known!] and move the DIV to the left and the top by adding a nagative margin to both directions, which is exactly the half of each the width and the height.

Puuuh, I hope I explained it in a understandable way.

Greetings from Germany,

Jens Grochtdreis