CSS:

Centering a <div> on the Page

I often see people posting on CSS discussion lists to ask how to centre a div. It's actually very simple, although you need to use a few hacks for unruly browsers.

body {
	text-align: center;
	min-width: 600px;
}

#wrapper {
	margin:0 auto;
	width:600px;
	text-align: left;
}

To centre the div, simply set its width and then use margin auto on the right and left hand sides. Unfortunately this doesn't work in IE. However luckily for us, IE also misinterprets text-align: center. Applying this to the body centres the div in IE. However it also centres the body text in all the other browsers as well. To get round this you need to use text-align: left; on the div that you're centering.

This gets IE up to scratch. However this is the step I always forget. In Mozilla, if you reduce the size of the browser window, half of your centred div hangs off the left of the page. This is an odd one, but I've been reliably informed that it's the correct behaviour. To prevent this, just set a min-width on the body tag.

From AndyBudd »