Skip navigation
Tyssen Design — Brisbane Freelance Web Developer
(07) 3300 3303

How do I centre my layout?

By John Faulds /

To centre a CSS layout horizontally, you need to add margin: 0 auto; to either the body or a containing element (it's generally a good idea to wrap your whole layout in a containing element and give it a meaningful ID like #wrapper or #container) and give that element a width. What that does is set the left and right margins to automatically take up the window space not occupied by the specified width.

For IE5 browsers we also have to add text-align: center; to the same element. This also centres anything in descendant elements so if you don't want your text centred, you then have to reset the text-align back to left on a descendant element. So you might set the auto margins and text-align: center; on the body but then set the text-align back again on #container.