居中在另一个居中的div内溢出它的父母的div

问题描述：

我有一个列的布局，其中列是具有固定宽度的居中的div。我想在填充父母的列中放置更宽的div，但将其居于父母的中间。从概念上类似以下内容：居中在另一个居中的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比其父更薄，但一旦变大，它总是留给家长出于某种原因一致。

答

我做了一个jsFiddle solution

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

在FF 3.6测试，IE7和IE8

虽然我想将内部div视为流动对象。在元素完全定位后，是否有办法恢复正常流动模型？ – 2010-10-18 11:14:20

我已更新jsFiddle代码：[点击此处]（http://jsfiddle.net/4VrMv/3/）使用相对定位来保持流动（所以子元素的高度延伸父元素） – 2010-10-18 11:17:27

正是我在找的东西。谢谢。 – 2010-10-18 11:20:34

答

我不是100％肯定，但尝试给父元素设置为relative和儿童absolute的位置，然后为孩子top，left和width/height性能DIV相应。

绝对与它的定位是，它从正常流动模型中删除和元素将在它出现的问题。是否有办法在绝对定位的元素之后恢复正常流动模型？ – 2010-10-18 11:15:37

恢复正常流程的唯一方法是通过确保#wrapper高度与#child高度相同来模拟它。 – meustrus 2012-09-14 17:50:37

答

我制成贾斯特斯溶液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变小或变宽时，居中会出错...... – 2010-10-18 12:41:21

答

这是我如何解决这个问题：

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>

答

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

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

居中在另一个居中的div内溢出它的父母的div

相关推荐