3

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

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

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

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

4

3 回答 3

3

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

您的解决方案完全按照 CSS 2.1 规范工作，它很健壮。

作为参考，您需要查看：

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

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

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

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

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

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

在旁边

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

关于负边距

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

于 2013-04-22T11:00:19.947 回答
0

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

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

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

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

于 2013-04-22T02:44:11.733 回答
-1

这是我最好的选择

将你的 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>
于 2013-04-22T02:52:47.377 回答