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.
Comment
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!
Comment
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.
Comment
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.
Comment
Was “min-width” solely a Netscape 6 fix? I don’t find this problem with centering in Netscape 7.1 or Firebird 0.7.
Comment
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.
Comment
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.
Comment
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.
Comment
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.
Comment
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.
Comment
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.
Comment
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 :)
Comment
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.
Comment
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
Comment
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
Comment
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? :-;
Comment
Mozilla was incorrectly handling ‘margin:0 auto;’, although various people think it was correct. It has been fixed in 1.7a.
Comment
IE css hacks just make my brain crack.
94% of internet users with a wannabe browser. Lord take me now.
;)
Comment
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.
Comment
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.
Comment
what happens if you want to centre a div inside another div?
Comment
Do the same as above but reference the parent div rather than the body tag.
Comment
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
Comment
What if you don’t know the width of the div you want to center?
Comment
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.
Comment
Worked like a charm. Thanks again Andy!
Comment
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.
Comment
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?
Comments on: CSS Crib sheet #3 - Centering a Div
Jump to the comment form