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

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 中运行……但它也似乎是一个巨大的、肮脏的、不好的定位黑客，可能会崩溃随时在接缝处。

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

Answer 1

鉴于您的两个容器.outer 和.inner 是绝对定位的，那么您所做的不仅是正确的，而且也是唯一的方法 当没有指定父容器的宽度时。

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

供参考，您需要查看：

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

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

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

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

但是，正如前面在评论中指出的那样，如果包含块的宽度（我的演示中的视口或包装器元素）小于您的子元素的宽度（在您的示例中为 400px），那么居中将不再起作用，但是根据 CSS 规范，这仍然是正确的行为。

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

一边

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

关于负边距

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

Answer 2

我一直发现，一旦您进入position:absolute; 池，您就放弃了一个优雅的解决方案。遗憾的是，在很多情况下，绝对定位是解决问题的唯一方法。

据我所知，行业标准使用负边距，正如您所提到的：http://jsfiddle.net/Mquha/3/

再一次，这感觉很脏，而且：不可重复使用。

我已经研究了你建议的方法，你的方法似乎是一个相当现代的发现，我有点惊讶它甚至可以工作。无论如何，它比负边距方法容易得多，并且似乎被所有主要浏览器支持，就像你说的那样。 我正在采用您将来提出的方法，仍然不完美，但至少它比使用负边距更脏。我只能建议您在使用绝对定位时也这样做。

Answer 3

这是我最好的选择

把你的css改成

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

还有你的 html 到

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