Browser support for margin: auto

Question

Like many designers I use margin: 0 auto; to center an element. While trying to check the browser support for this feature at http://www.caniuse.com I was unable to find anything related.

Is there a browser compatibility matrix for this feature?

Rossen

If you can't find it on caniuse, then you may assume it is supported by everything. Except maybe IE6 because screw IE6... – Spearman

@NiettheDarkAbsol, I read somewhere about some issues with older Android versions of Opera or Chrome - I can't remember. – Rossen

Answer 1

Although you probably don't want to adjust your code to work in antique browsers that don't support margin: 0 auto;, but since you asked:

Support started only with IE6. If you want to support earlier browsers, you can add text-align: center; to the parent element. This works because old browsers incorrectly apply text-align also to block-elements. At the same time, keep margin: 0 auto; for modern browsers. If you want text-align: center to work in modern browser as well, you can also set display: inline-block; - then you won't need margin: 0 auto;.

So assuming this is your HTML:

<div id="outer">
    <div id="inner"></div>
</div>

you have these options:

Option 1

#outer {
    background: pink;
    width: 100%;
    text-align: center; /* for very old browsers */
}

#inner {
    background: green;
    display: inline-block;
    width: 50px;
    height: 50px;
    margin: 0 auto; /* for >99% of browsers */
}

Option 2

#outer {
    background: pink;
    width: 100%;
    text-align: center;
    height: 50px; /* height of child - necessary for IE8 and IE9,
    otherwise the height is slightly larger than that of the child */
}

#inner {
    background: green;
    display: inline-block; /* necessary for modern browsers, IE8+ */
    width: 50px;
    height: 50px;
}

But as I said, before supporting such ancient browsers, you may really think if the extra effort is worth it, or if it's better to just drop support for them.

Sharleensharlene

Great answer! Thank you! – Rossen

Another one question: What's up with cross-browser support of width: auto;? – Rossen

Is there any particular reason you are asking? As far as I know, width: auto; is supported by all browsers and also happens to be the initial value. To calculate the auto width for block elements, substract horizontal margins/padding/borders from the parent element's width. For inline elements, the auto width is simply the width of the content. It's as if you don't set any width at all. – Sharleensharlene

Yes, there is reason. I am developing a HTML5 framework and I'm relying heavily on margin: 0 auto and width: auto; rules. I'm targeting Android Browser 2.3+ so I have to avoid such handy things like calc(). – Rossen

Have you encountered any problems with width: auto;? As far as I know, it should work fine among all browsers. – Sharleensharlene

Answer 2

From https://developer.mozilla.org/en/docs/Web/CSS/margin , all browser support margin: 0 auto; fully.

Swingletree

The answer is wrong. Some old browsers do not support margin: 0 auto;, and this is also indicated in the cited source. See my answer for a more details. – Sharleensharlene