CSS Crib sheet #3 - Centering a Div | February 4, 2004

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.

Posted at February 4, 2004 8:02 PM

Comments

ste said on February 4, 2004 10:59 PM

Hrm, I knew all of that except the min-width bit. Hrm, guess I’ll have to start adding that on sites where I center fixed-width content. And I guess I should add resizing my windows so that they are smaller than the content area to my testing regimen - I never even noticed that problem. (I usually only resize to the typical 580×420 size that is roughly equal full-screen 640×480 with browser chrome.) Thanks!

Jon Hicks said on February 4, 2004 11:00 PM

If you add position:relative to the wrapper div, you can position elements inside with absolute positioning - handy if you want to avoid using floats.

ben said on February 5, 2004 12:02 AM

What about the negative margin method:

div {
position: absolute;
left: 50%;
width: 500px;
margin-left: -250px;
}

Anyone have thoughts on this method? I like it because it leaves the markup very clean. And, afaik it works in all browsers.

Joel said on February 5, 2004 12:14 AM

Was “min-width” solely a Netscape 6 fix? I don’t find this problem with centering in Netscape 7.1 or Firebird 0.7.

Jane said on February 5, 2004 4:07 AM

Thanks for the post, I was wondering if you would chime in on this. Did you add a min-width in your CSS, or is my browser buggy? Today the page is rock solid.

dusoft said on February 5, 2004 8:10 AM

Andy,

thanks much for the mentioning of min-width attribute. I’ve been lost why Mozilla pushes half of the DIV off the screen, when Explorer doesn’t. Now I know. Thanks again for the tip. It’s pretty invaluable.

dusoft said on February 5, 2004 8:12 AM

BTW: I use Firebird and got one centered DIV 1019px wide - this when min-width comes handy. You didn’t have to notice behaviour of pushing things off screen, because you used narrower DIVs.

Andy Budd said on February 5, 2004 8:38 AM

A few people mentioned in a previous post that my site was displaying this problem in Netscape/Mozilla. The min-width fix is something I know about but always forgot to do so I made this post as much to remind me to do it, as anything else.

Jon Hicks said on February 5, 2004 8:56 AM

Ben - the only problem with the negative margin method is that it will push content out of view if its larger than the window, without giving you scrollbars. The auto-margin method doesn’t do this.

Joel said on February 5, 2004 2:17 PM

Actual width of the div you want to centre is not stated to be an issue here. It is stated that unless “min-width” is used half the div of any width will be off-screen at the left and inaccessible in Mozilla.

However, I simply do not find this problem in Netscape 7.1, Firebird 0.7, Mozilla 1.3 on a PC, where “min-width” is not used and with divs approximately between 500px and 650px. I can see that for some “min-width” has solved a problem, but as I can’t reproduce the problem I’m inclined to think it is not as straightforward as stated.

I don’t like to add superfluous code in an attempt to solve problems I don’t actually have.

Question then is, what is the real problem that is solved by “min-width” if it is not as stated? More definition required.

AkaXakA said on February 5, 2004 5:24 PM

To continue Joel’s remark:

Not only doesn’t the problem exist anymore in newer versions of Mozilla, if you don’t have a width in pixels (such as percentages) you don’t have that problem either.

http://cascadinglounge.tk/ is an example of that (and it’s my newest site, but it’s for the sake of the argument :)

Luc said on February 6, 2004 12:43 AM

I have a testpage where i had the same problem. It consists of 2 floated columns and underneath those another 3 floated columns.

http://www.dzinelabs.com/test/zoel.htm

Adding the min-width to the body tag however fixes the problem with the missing content but it pushes my right column much lower then the first column in Moz and Opera. In IE they keep nicely aligned. Now, when i first encountered the missing content problem, i fixed it with setting a border on the wrapper with the same color as the pages background and that keeps the columns not exactly aligned but still better then using the min-width.

Tom Dell'Aringa said on February 6, 2004 1:44 PM

Well, if it doesn’t work in IE - that is, 94% (+/-) of the browser population, then it isn’t a solution is it? :)

I’m continually amazed at hacks that leave out IE because we don’t like its quirks. While I can understand it for a personal blog where you don’t care/have control of your users - in a production environment such code is useless.

Just my .02

Tom

Tom Dell'Aringa said on February 6, 2004 1:49 PM

Okay, maybe I should have read that a bit better LOL! So you hack it work in IE - das good.

As Treebeard says - don’t be too hasty.

Tom

Luc said on February 7, 2004 12:47 AM

Lol. I almost made the same mistake when reading your reply and didn’t notice your second reply :-)

But as a side note: aren’t 94% of the hacks intended to let IE behave as a browser? :-;

Anne said on February 10, 2004 3:23 PM

Mozilla was incorrectly handling ‘margin:0 auto;’, although various people think it was correct. It has been fixed in 1.7a.

ruisealman said on February 18, 2004 1:08 AM

IE css hacks just make my brain crack.
94% of internet users with a wannabe browser. Lord take me now.

;)

Chirag Rana said on February 18, 2004 3:07 PM

Most of the designers are initerested in creation and not to FIX the things to work better. Unfortunately and unlike print media designers are spending 90% of their creativity to please today’s leading(?) browsers.

Chirag said on February 18, 2004 3:08 PM

Most of the designers are initerested in creation and not to FIX the things to work better. Unfortunately and unlike print media designers are spending 90% of their creativity to please today’s leading(?) browsers.

ziggyzaggy said on September 21, 2005 2:24 PM

what happens if you want to centre a div inside another div?

Andy Budd said on September 21, 2005 2:35 PM

Do the same as above but reference the parent div rather than the body tag.

Kuldeep said on November 24, 2005 5:28 AM

I have given “align=center” in html or “text-align:center” in my css & applied it in required position & it is working fine in IE but not in Mozilla.

Kindly give me any suggestion… how to sort it out this bug

mick said on December 29, 2005 5:23 PM

What if you don’t know the width of the div you want to center?

Lee said on January 19, 2006 4:36 PM

I have the same problem as mick in that the div I wish to center within another div varies in width so this doesn’t work.

Is there a solution to the centering problem without relying on the width vairable being set?

Any help would be appreciated.

Terry Anderson said on January 23, 2006 4:43 PM

Worked like a charm. Thanks again Andy!

saul said on March 6, 2006 11:19 PM

Hi, I’d like to comment on this div center align issue. It appears if You have a valid XHTML 1.0 dtd and no <?xml version=”1.0” encoding=”utf-8”?> tag before the dtd declaration then IE6 handles the “margin-left: auto; margin-right: auto;” like a charm. At least on my machine it does :D So go ahead and make sure the dtd-s are correct.

Karl Spencer said on March 26, 2006 3:45 PM

What about centering vertically? I mean, can you use margins auto on the top and bottom? Or is that centering horizontally? Anyway, I want to centre both ways. How can I do it?