浏览器对边距的支持：自动

Question

像许多设计师一样，我使用 margin: 0 auto; 使元素居中。在 http://www.caniuse.com 尝试检查浏览器对此功能的支持时，我找不到任何相关内容。

是否有此功能的浏览器兼容性矩阵？

Answer 1

从 https://developer.mozilla.org/en/docs/Web/CSS/margin 开始，所有浏览器都完全支持 margin: 0 auto;。

Answer 2

虽然您可能不想调整您的代码以在不支持 margin: 0 auto; 的老式浏览器中工作，但既然您问了：

仅支持 IE6。如果你想支持更早的浏览器，你可以在父元素中添加text-align: center;。这是可行的，因为旧浏览器错误地将 text-align 也应用于块元素。同时，为现代浏览器保留 margin: 0 auto;。如果您希望 text-align: center 也能在现代浏览器中工作，您还可以设置 display: inline-block; - 那么您将不需要 margin: 0 auto;.

所以假设这是你的 HTML:

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

您有以下选择：

选项 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 */
}

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

但正如我所说，在支持这些古老的浏览器之前，您可能真的会考虑是否值得付出额外的努力，或者最好还是放弃对它们的支持。

浏览器对边距的支持：自动

Browser support for margin: auto

css

browser-support

选项 1

选项 2