CSS Forum

**Ricochet** · 01-03-2008, 02:53 AM

Alright my friend is creating a website and I said I would help. Well he gave me the job of centering the page... Oh the joy. I did this before but I forgot how I was suppose to do it. On another site I help center I used this css:

div.all {
position: absolute;
left: 50%;
width: 735px;
top: 50%;
height: 340px;
margin-left: -368px;
margin-top: -170px;
}
I need to center this page http://citadelstudios.net . On my computer (Resolution: 1152 x864 ) in IE the page is not centered and is shifted to the left and in Firefox its not centered and shifted to the right. Any help would be great!

**MarvinLeRouge** · 01-03-2008, 07:59 AM

Hello to you too,

2 basic solutions :
#yourContainer
{
width : whatever;
margin : 0 auto;
}
(centers only horizontally)

#yourContainer
{
width : whatever;
height : whatever;
position : absolute;
left : 50%;
top : 50%;
margin-left : - (width/2); /* to be replaced with a real value */
margin-top : - (height/2); /* to be replaced with a real value */
}

**pealo86** · 01-03-2008, 08:23 AM

Also you'll need to add:

Code:

body {
text-align:center; }

so that it is centred in IE6

**Chromatic** · 01-03-2008, 09:41 AM

The above answers are wrong.

To center your page, do the following:

Wrap all of your content inside of a div called #container, #wrapper, or whatever you want to call it.

In your style sheet, assign the following attributes:

#wrapper { margin: 0; padding: 0; margin-left: auto; margin-right; auto; }

That is all you need to do. Good luck.

**chrishirst** · 01-03-2008, 03:46 PM

Come on, it's not like this is a complicated method;

3 replies all partially right!

1/ Apply a full and valid doctype to put IE into "standards mode"
Doctypes are at http://www.w3.org/QA/2002/04/valid-dtd-list.html

2/ Create a "wrapper" div to hold all the elements use;
set a top and bottom margin to whatever you need and use auto for the left & right margin (every body got that)

3/ Give the wrapper div a FIXED WIDTH
768px to 788px for 800x600 min and 968px to 998px for 1024x768.

everybody missed out steps 1 & 3

Avoid absolute postioning "solutions" totally, as they will only be correct at one screen size when the browser window is full screen.

**LadynRed** · 01-03-2008, 04:10 PM

Quote:

#wrapper { margin: 0; padding: 0; margin-left: auto; margin-right; auto; }

That is all you need to do. Good luck.

That's NOT all you need to do and there was nothing wrong at all with Marvin's answer (aside from what Chris said

).

margin: 0 auto; is CSS SHORTHAND for margin: 0 auto 0 auto (top, right, bottom, left). The additional margin: 0 is completely unnecessary.

The text-align: center; on the <body> is necessary to make IE 6 and below behave and center, which then make it necessary to re-set the text alignment on the #wrapper, ie: text-align: left.

I also set my #wrapper to position: relative in case I wind up having to position an element inside #wrapper.

I totally concur on avoiding the position:absolute scenario.