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

我想要一个可重复使用的方法来在其容器中水平居中放置绝对位置的固定宽度元素，并且我想要可重用的代码（例如，没有负像素边距）。这是将绝对定位元素水平居中的有效方法吗？

我经历了完美的作品组合跌跌撞撞：

<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 ......但它也似乎是一个巨大的，肮脏的，不好的定位黑客，随时都可能在接缝处发现。

我找不到任何文件来建议此定位行为是正确还是不正确。这是什么？适合生产还是完全不可靠？

来源

2013-04-22 Aaron Adams

哦，我的上帝！它也适用于垂直居中！ o_O – laconbass 2013-04-22 02:53:56

似乎很好，只要你不寻找**流体布局**。 – 2013-04-22 03:01:51

我不明白这与使用相对定位+负边界（除了看起来像更多代码的事实不同）。无论哪种方式，你必须知道元素的大小。既然你已经知道它的大小，将它除以2似乎是一个没有问题的问题。 – cimmanon 2013-04-22 03:27:22

鉴于你的两个容器.outer和.inner是绝对定位的约束，则你所做的不仅是正确的，而且，它也是唯一的办法做到这一点当父容器r的宽度没有指定。

您的解决方案完全按照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规范的用户代理中，负边际可能会被打破。

来源

2013-04-22 11:00:19

谢谢！这正是我正在寻找的答案：记录行为。我无法亲自找到它（这些官方的W3C文档对我来说有点压倒性）。显然，这仍然需要在大量浏览器上进行测试，但是在我所居住的世界中，它可能被证明是一个巨大的时间和线上节省。 – 2013-04-22 12:45:59

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

据我所知的行业标准是使用负利润率，正如你所说：再次http://jsfiddle.net/Mquha/3/

而且，这种感觉很脏，而且：不能重复使用。

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

来源

2013-04-22 02:44:11 belens

为什么你认为绝对定位不够优雅？ – laconbass 2013-04-22 02:50:39

只有当内容可预测小于视口或周围内容时，用于居中的绝对定位才能正常工作。 – cimmanon 2013-04-22 03:12:31

我个人认为这并不高雅，因为当你使用它时，大部分时间你都在打破页面的流动。 @cimmanon，绝对定位几乎总是可以预测的，因此名字的绝对定位。我想知道我的答案是什么，值得反对。 – belens 2013-04-22 18:56:44

-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-22 02:52:47 jshariar

问题的解决方案实际工作，问题是如果是可取的生产使用 – laconbass 2013-04-22 02:54:59

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

回答

相关问题