将一个 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

当元素溢出其父元素时，它只向右溢出是正常行为。例如，当您的网站比视口更宽时，您永远不需要向左滚动，而只需向右滚动。该解决方案基于绝对居中的 div，具有负左边距（该值是其自身宽度的一半）。所以如果你知道这个元素的宽度，这个解决方案应该没问题。

在 FF 3.6、IE7 和 IE8 中测试

Answer 2

我制作了 Justus 解决方案的一个变体。我在内部元素中使用了 50% 的负边距，而不是相对定位。

#wrapper {
    margin: 0 auto;
    padding: 10px 0 10px;
    width: 200px;
    background-color: #eee;
}
#child {
    margin: 0 -50%;
    width: 400px;
    background-color: #ddd;
}

这样您就不需要提前知道元素大小。

Answer 3

我不是 100% 确定，但尝试将父元素的位置设置为 relative 和子元素 absolute，然后设置 top、left相应的子 div 的 和 width/height 属性。

Answer 4

这就是我解决它的方法：

http://jsfiddle.net/WPuhU/1/

另外要小心滚动条（如果您的窗口视图小于溢出的 div，则滚动条不会出现）。自动将溢出的 div 居中。

css:

#center-3 {height:40px;background-color: #999;}
#center-1 {height:20px;top:10px;background-color: #aaa;}

/* the necesary code */
body {width:100%;margin:0;}
#center-4 {
    width: 100%;
    overflow:hidden;  
    /* remove the next 2 line for a normal flow */
    position: absolute;
    z-index: -1;
}
#center-3 {
    position: relative;
    margin: 0 auto;
    width: 200px;
}
#center-2, #center-1 {
    position: relative;
    width: 400px;
}
#center-2 {
    left: 50%;
}
#center-1 {   
    left: -50%;
}

html:

 <div id="center-4">
    <div id="center-3">
        <div id="center-2">
            <div id="center-1"></div>
        </div>
    </div>
</div>
<div id="other-stuff">Here comes the other stuff above.</div>

Answer 5

#parent {
  position: relative;
  width: 100px;
  overflow: visible;
}

#child {
  width: 400px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}