css - 这是水平居中绝对定位元素的有效方法吗？

Question

我想要一种可重用的方法来将绝对定位的固定宽度元素在其容器内水平居中，并且我想要可重用的代码(例如，没有负像素边距)。

我偶然发现了一个完美的组合:

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

它很干净，(相对)容易理解，它似乎可以在 IE 8+、Chrome、Firefox、Safari 中工作……但它似乎也是一个巨大的、肮脏的、不好的定位 hack，一个可能会分崩离析随时在接缝处。

我找不到任何文档来表明这种定位行为是正确的还是不正确的。是哪个？适合生产，还是完全不可靠？

Answer 1

考虑到您的两个容器 .outer 的约束和 .inner绝对定位，那么你所做的不仅是正确的，而且是唯一的方法当未指定父容器的宽度时。

您的解决方案完全符合 CSS 2.1 规范，非常可靠。

作为引用，您需要查看:

http://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-width

指定如何计算绝对定位元素的宽度。

在您的 jsFiddle 示例中，您需要意识到两个 <div> 的包含 block 的是视口(viewport)或根元素。您还没有通过指定 top 来说明垂直放置。或 bottom特性。此外，由于绝对定位的元素是流外的，因此它们的固有高度不会影响计算包含 block 的高度，在某些应用程序中，这是一个因素，如果不进行修改，这种方法将无法使用。

此外，如果您要将示例代码包装在相对定位的包装器中 <div> ，并且您应用了固定宽度，那么子元素仍会正确居中，如本演示所示:http://jsfiddle.net/audetwebdesign/aNS5j/ (请记住，您可能需要在包装元素中留出足够的高度。)

但是，正如前面评论中指出的那样，如果包含 block 的宽度(我演示中的视口(viewport)或包装元素)小于子元素的宽度(在您的示例中为 400px)，则居中将不再有效，但是根据 CSS 规范，这仍然是正确的行为。

您的问题触及了 CSS 视觉格式化模型如何工作的基本但重要的基础。

放在一边

如果不在 .inner 上使用绝对定位，您仍然可以获得相同的效果。元素，在这种情况下，margin: 0 auto本来就足够了。在稍微更简洁的 CSS 声明中节省成本。

关于负边距

尽管负边距确实有效并且在大多数现代浏览器中都得到了一致的实现，但 CSS 2.1 规范并未说明应如何实现负边距。理论上，负边距可能会在某些仍符合 CSS 规范的用户代理中失效。