父级大于屏幕的 CSS 中心元素

Question

这是我的 html:

<div id="bar">
    <div class="container">
        <div class="item"></div>
    </div>
</div>

#bar 是 100% 并且隐藏了溢出。

.container 为 1600px，margin: 0 auto;使其居中。还有 position:relative;

.item 是 960px，我想居中这个元素

当我的屏幕正好是 1600 像素时，.item 正确居中。但是当我把它变小时，.item 会向右移动更多。看起来计算出的边距总是 320px ((1600-960)/2) 并且是相对于 .container 计算的。但是浏览器会应用相对于视口(viewport)的边距。

有谁知道如何让浏览器在父级不可见时应用其父级的相对边距？

Answer 1

我在 jsfiddle 上想出了一个这样的例子，但使用了较小的尺寸，因此它是可见的。添加 margin: 0 auto; 到 .item 应该可以解决这个问题。

http://jsfiddle.net/EMHSs/