css - 将一个 div 居中，它在另一个居中的 div 中溢出它的父级

Question

我有一个单列布局，其中列是一个固定宽度的居中 div。我想在溢出它的父项的列中放置一个更宽的 div，但将它放在父项的中心。概念上类似于以下内容:

<div style="width: 100px; margin: 0 auto; overflow:visible;" id="parent">
    <div style="width: 400px; margin 0 auto;" id="child"></div>
</div>

只要子 div 比其父 div 细，居中就有效，但一旦它变大，由于某种原因它总是与父 div 左对齐。

Answer 1

#wrapper {
  margin: 0 auto;
  width: 200px;
  background-color: #eee;
  position: relative;
  height: 200px;
}

#child {
  position: absolute;
  top: 0;
  left: 50%;
  margin: 0 0 0 -200px;
  width: 400px;
  background-color: #ddd;
}

<div id="wrapper">
  <div id="child">Child div</div>
</div>

jsFiddle

当一个元素溢出他的父元素时，它只会向右溢出是正常的行为。例如，当您有一个比视口(viewport)更宽的站点时，您永远不必向左滚动，而只需向右滚动即可。这个解决方案是基于一个绝对居中的div，左边距为负值(那个值是他自己宽度的一半)。所以如果你知道这个元素的宽度，这个解决方案应该没问题。

在 FF 3.6、IE7 和 IE8 中测试