How to center DIV in DIV?

Question

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...

Answer 1

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.

Answer 2

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

Answer 3

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>

Answer 4

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