Re: Centering a web page…again and again.

[Senff]

There is no definitive answer to this, since not all web pages are made the same.

To center a (block-level) item, give it a defined width and margin:0 auto
To center items IN an item, give the item text-align:center;

But to center nested elements, you’ll have to apply these two rules again, nested and all.

And then sometimes you have to make block level elements inline, and vice versa. And listitems are also a bit tricky sometimes.

Also, using positioning (both relative and absolute) can be used to center items….or break them.

It really all depends on the design any layout. In your fiddle, you use elements that are centered alright, but within elements that are not wide enough. For example, #container is 620 but #main_content is 502 — that will never properly center, since the outer one needs to be larger than the inner one.

Unless you use absolute positioning, in this case.