Skip to content

Tyssen Design — Brisbane Tyssen Design logo

[email protected] (07) 3300 3303

How do I centre my layout?

By /

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.

Like to say hello? Give us a call on (07) 3300 3303, send us an email to enquiries@tyssendesign.com.au, or a message by filling in the form below.