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比其父级更薄，居中就会起作用，但是一旦它变大，它总是由于某种原因与父级对齐。

Answer 1

我做了jsFiddle solution

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

在FF 3.6，IE7和IE8中测试

Answer 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;
}

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

Answer 3

我不是百分百肯定，但尝试将父元素设置为relative和子absolute，然后设置top，left和{{1}相应的子div的属性。

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%);
}

在另一个居中的div中居中一个div，它溢出了它的父节点

5 个答案: