css – 居中一个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中测试过