tags:

views:

31575

answers:

4

I'd like to ask you if anyone know how to horizontally center DIV in DIV with CSS ( if it's possible at all ). Outer DIV has 100%:

<div id="outer" style="width:100%">  
     <div id="inner">Foo foo</div>
</div>

I've been searching for the solution for some time but I haven't found it anywhere yet...

+35  A: 

You can apply this CSS to the inner div:

#inner {
    width: 50%;
    margin: auto;
}

Of course, you don't have to set the width to 50%. Any width less than the containing div will work. The margin: auto is what does the actual centering.

Justin Poliey
I believe IE 6 requires an additional rule text-align:center on the containing DIV.
pdc
It doesn't, except in Quirks mode, and you have to take counter measures to stop the center alignment influencing the *content* of the inner div. http://dorward.me.uk/www/centre/#ie has details.
David Dorward
Shouldn't it be margin: 0px auto;, otherwise if you also specificy a height it will vertically align it?
roryf
Auto top and bottom margins do not vertically centre elements.
David Dorward
great, I have been looking for some new way of aligning the div to center (didn't want to use the obsolete technique i.e. align="center").Thanks for this great information. :-)
Gaurav Sharma
For the vertical centering I usually use "line-height" (line-height == height). This is simple and nice but it's only working with a one line content text :)
Niklaos
+1  A: 

It cannot be centered if you don't give him a length, otherwise it will take, by default the hole horizontal space.

gizmo
+1  A: 

Folks,

Just a metacomment: <flame> there are many CSS suggestions on the Web. Most of them don't work on one or more types and versions of browsers, and some don't work on any browser (because they are guesses masquerading as advice). My feeling is that in most cases the authors (particularly of forum and blog comments) have not bothered to try what they suggest.

I've been working with CSS for years, and I still don't know how to center horizontally and/or vertically with respect to a parent container. It's not because I'm stupid, and it's not because I haven't tried to read the CSS standards. It's because the CSS stardards are too complicated for browser creators to get right. Oh, and none of them come with a comprehensive set of test cases, either. </flame>

It really isn't that hard, especially if you're using a nice editor like coda. Box model does seem complicated, but you know what? Printing shit on paper is twice as complex, and most people don't realize that. CSS dreams of offering the level of control over content like that, and it will be there soon. I suggest jumping in now before the hole gets too deep.
Sneakyness
A: 

Set the width and set margin-left and margin-right to auto. That's for horizontal only, though. If you want both ways, you'd just do it both ways. Don't be afraid to experiment, it's not like you'll break anything

Sneakyness
Other than your layout, that is ;)
Sneakyness