keeping <div> centered

[robert.cfi]

hello i have a site. www.kcflight.com I am starting to learn to use css to develop the sites. I understand that many people out there have a lot different sizes of resolution. I have a fairly large res which is 1680/1050. I need to know how to keep a

centered. When i create it in my css file i have to use "left: 480px;". When i do this it will always keep the object 480px from the left side of the page. There has to be a way to create it so that no matter what it will stay centered.

here is an example of one of my css codes.

#center_table {

position: absolute;

top: 9px;

left: 252px;

width: 776px;

height: 930px;

background-image: url(bgtable.png);

overflow: hidden;

background-repeat: no-repeat;

}

this code should give me a background that i made which i can add text/pic on top of it to make it look like a table.

i would just like to know what i need to change to make it always stay centered.

[shelfimage]

here are a couple links

http://www.mezzoblue.com/tests/centered-css/

http://www.zachgraeve.com/2006/10/01/center-abosulte-position-div/

[Wickham]

If you have a page that is over about 750px wide I would NOT rewcommend the second link which uses position: absolute; left: 50%; margin-left: (negative half the div width). What happens is that in viewports smaller than the div width the left side slides out to the left where you cannot scroll to reach it. This method is only suitable for small divs.

 

Use the method in the first link which is a width: ???px; margin-left: auto; margin-right: auto; (or just margin: auto;) which makes the side margins equal so that the div will center. The disadvantage is that this method does not work with a position: absolute containing div, use either no position or position: relative.

 

See http://w ww.wickham43.net/centeringdivs.php

Edited January 20, 2009 by Wickham

[robert.cfi]

thanks guys this really helps.