CSS中心元素哪个父元素比屏幕大

CSS中心元素哪个父元素比屏幕大,css,center,Css,Center,这是我的html: <div id="bar"> <div class="container"> <div class="item"></div> </div> </div> #酒吧是100%和溢出隐藏 .容器为1600px,边缘:0自动;把它放在中间。位置:相对位置 .项目为960像素,我想将此元素居中 当我的屏幕正好是1600px时,.项正确居中。但是当我把它变小的时候,.item会

这是我的html:

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

#酒吧是100%和溢出隐藏

.容器为1600px,边缘:0自动;把它放在中间。位置:相对位置

.项目为960像素,我想将此元素居中

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


有人知道当父对象不可见时,如何让浏览器应用其父对象的相对边距吗?

我在JSFIDLE上给出了一个这样的示例,但使用了更小的尺寸,以便其可见。添加
页边距:0自动到。项目应修复它


页边距:0自动不工作。由于定义了宽度,项目也会工作吗?如果不知道.item的内容(以及其他div,如果它们有其他内容的话),我就无法理解这个问题。你能提供一个例子来说明这个问题吗?当我的屏幕正好是1600px时,。项目正确居中。但是当我把它变小的时候,.item会向右边移动更多。这是因为DOM锚定在视口的左侧,溢出仅延伸到右侧之外。为什么指定
1600px
?因为.item上的bij背景图像的宽度为1600px。所以在大屏幕上看起来很棒,但在结果介于1600和960之间的屏幕上,我不想要水平滚动条。我知道如何用javascript修复它,但我对CSS解决方案非常好奇。请参阅下面的jsfiddle()和注释。我已经更改了您是jsfiddle。所有96px盒都是“现场”。在绿色框中,我有一个大背景图像,但当屏幕小于160px时,我不想要滚动条;因此,我把100%和溢出隐藏的红色框。是的,这没有区别。当屏幕变小时,蓝色框不再位于视口的中心。。。