将溢出其父级的 div 居中在另一个居中的 div 中答案

【问题标题】：Centering an div which overflows it's parent within another centered div将溢出其父级的 div 居中在另一个居中的 div 中
【发布时间】：2011-04-26 21:16:09
【问题描述】：

我有一个单列布局，其中列是具有固定宽度的居中 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 左对齐。

【问题讨论】：

标签： css html overflow centering

【解决方案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 中测试

【讨论】：

不过，我想将内部 div 视为可流动的对象。有没有办法在元素被绝对定位后恢复正常的流动模型？
我已经更新了jsFiddle代码：click here使用相对定位来保持流动（这样子元素的高度会拉伸父元素）
正是我想要的。谢谢。

【解决方案2】：

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

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

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

【讨论】：

嗯这对我不起作用。当我使用此代码并使#child 更小或更宽时，居中会出错...

【解决方案3】：

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

【讨论】：

绝对定位的问题是它从正常的流动模型中移除，元素会出现在它的下面。有没有办法在绝对定位的元素之后恢复正常的流动模型？
恢复正常流程的唯一方法是通过确保#wrapper 高度与#child 高度相同来模拟它。

【解决方案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>

【讨论】：

【解决方案5】：

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

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

【讨论】：