Is this a valid way of horizontally centering absolute-positioned elements? - css

Question

I want a reusable method to horizontally centre absolute-positioned fixed-width elements within their containers, and I want reusable code (e.g., no negative pixel margins).
I've stumbled across a combination that works perfectly:
http://jsfiddle.net/aaronadams/Mquha/
<div class="outer center">
<div class="inner center"></div>
</div>
.outer {
position: absolute;
width: 400px; height: 400px;
background: #999;
}
.inner {
position: absolute;
width: 200px; height: 400px;
background: #666;
}
.center {
left: 0; right: 0;
margin-left: auto; margin-right: auto;
}
It's clean, it's (relatively) easily understood, it appears to work in IE 8+, Chrome, Firefox, Safari… but it also appears to be an enormous, dirty, no-good positioning hack, one that could come apart at the seams at any time.
I can't find any documentation to suggest whether this positioning behaviour is correct or incorrect. Which is it? Appropriate for production, or completely unreliable?

Answer 1

Given the constraint that your two containers .outer and .inner are absolutely positioned, then what you have done is not only correct, but, it is also the only way to do it
when the parent container's width is not specified.
Your solution works exactly according to the CSS 2.1 specification, it is robust.
For reference, you need to review:
http://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-width
which specifies how the width of an absolutely positioned element is computed.
In your jsFiddle example, you need to realize that the containing block for the two <div>'s is the viewport or the root element. You have yet to say anything about the vertical placement by specifying the top or bottom properties. Also, since the absolutely positioned elements are out-of-flow, their intrinsic height does not factor into computing the height of the containing block, and in some applications, this is a factor that would make this approach unusable without modifications.
In addition, if you were to wrap your sample code in a relatively positioned wrapper <div>, and you applied a fixed width, then the child elements would still center correctly, as shown in this demo: http://jsfiddle.net/audetwebdesign/aNS5j/ (Keep in mind that you may need to allow sufficient height in the wrapper element.)
However, as pointed out earlier in a comment, if the width of the containing block (either the viewport or the wrapper element in my demo) is less than the width of your child elements (400px in your example), then the centering would no longer work, BUT this would still be the correct behavior according to the CSS specification.
Your question has touched upon a basic but important fundamental of how the CSS visual formatting model works.
Aside
You could still get the same effect without using absolute positioning on the .inner element, in which case, margin: 0 auto would have been sufficient. The cost savings in a slightly more concise CSS declaration.
About Negative Margins
Although negative margins do work and are implemented consistently across most modern browsers, the CSS 2.1 specification does not say how negative margins should be implemented. In theory, negative margins could break down in some user agents that still conform to the CSS specification.

Answer 2

I've alway's found that once you're dipping into the position:absolute; pool, you're abandoning an elegant solution. Regretfully, there are a lot of cases where absolute positioning is the only way to solve a problem.
As far as I know the industry standard is using negative margin, as you mentioned: http://jsfiddle.net/Mquha/3/
And again, this feels dirty and moreover: not reusable.
I've looked into the approach you suggested, and your way seems like a fairly modern discovery, and I'm a bit surprised that it even works. At any rate, it is a lot easier than the negative margin method and seems to be supported by all major browsers, like you say.
I'm adopting the method you proposed in the future, still not perfect but at least it's less dirty than using negative margins. I can only advise you to do the same when you're using absolute positioning.

Answer 3

This is my best bet
change your css to
#outer {
position: absolute;
width: 400px; height: 400px;
background: #999;
}
#inner {
position: absolute;
width: 200px; height: 400px;
background: #666;
}
.center {
margin-left: auto; margin-right: auto;
}
And your html to
<div id="outer center" class="center">
<div id="inner center" class="center"></div>
</div>