2 replies [Last post]
Anonymous's picture

I am trying to center a style sheet so that it is centered regardless of the browser or resolution with which it is viewed. I am new to web development and I would appreciate any assistance. Thank you.

Tony's picture
Last seen: 3 weeks 3 days ago
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Centering a style sheet

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

Mainz, Germany
Last seen: 19 years 45 weeks ago
Mainz, Germany
Timezone: GMT+1
Joined: 2003-07-25
Posts: 1
Points: 0

Centering a style sheet

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