How can I center a div inside an absolutely positioned div? - html

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

use a percentage for margin-left, e.g:
.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 2

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 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;
}