如何在绝对位置的div内居中放置div？

Question

I am using a fluid layout design and I want the div with class center to be centered horizontally inside of the div with class outer . I tried this, but it doesn't work. What am I doing wrong?

HTML:

<div class="outer">
    <div class="inner"> // this div has height=0. Why?
        <div class="center">
            // stuff
        </div>
    </div>
</div>

CSS:

.outer {
    position: absolute;
    left: 0;
    right: 0;
    top: 50px;
    height: auto;
}

.inner {
    width:100%;
}

.center {
    margin:0 auto;
}

Answer 1

You've gotta treat the inner as if it's a regular div in a page, so something like:

#inner {
    position:fixed;
    top: 50%;
    left: 50%;
    width:234px;
    height:90px;
    margin-top:-45px; /*set to a negative number 1/2 of your height*/
    margin-left:-117px; /*set to a negative number 1/2 of your width*/
    border: 0.5px solid #ccc;
}

This would do the trick and you can adjust accordingly .

Answer 2

use a percentage for margin-left, eg:

.center
{
width:90%;
margin-left:5%;
}

the reason I used 5% is because since the width of center is 90% of it's container, we have 10% of space remaining, so to center it you'll have to bring it over to the left by half of the available space; which in this case is 5%

Answer 3

Inline-block is probably the best option for the centered div, then use our outer div with text-align:center to center the inner container. You don't really need an inner and a center div the way you have it, but I kept it in for examples sake. Below is a fiddle link:

http://jsfiddle.net/UYw8S/2/

Borders and padding added for example.

<div class="outer">
    <div class="inner">
        <div class="center">
           Inner stuff
       </div>
   </div>
</div>

.outer {
position: absolute;
left: 0;
right: 0;
top: 50px;
height: auto;
background:#ccc;
border:1px solid #333;
}

.inner {
display:block;
margin:10px;
border:1px solid #333;
text-align:center;
}

.center {
margin:10px 0;
text-align:left;
height:40px;
width:80%;
display:inline-block;
background:#fff;
padding:10px;
}