Html 垂直居中可能需要在div中使用滚动条的未知内容

我有一个图像，可以比用户的浏览器小，或者更大，垂直居中于div中。我想要一个只使用CSS的解决方案，但基于我所做的大量研究，我开始怀疑

更准确地说：如果图像比浏览器的高度小（从高度上看），它应该垂直居中——如果图像比浏览器的高度高，应该有一个滚动条来查看图像的其余部分。这在Firefox中非常有效，但在Chrome中却不行——我不知道为什么

在Chrome上，图像垂直移动到滚动条上方，因此它仍然居中，即使它太高。有什么想法吗？浏览器的最低要求是IE9+、Firefox、Chrome和Safari（所有这些浏览器的最新版本）

/*此元素仅填充整个浏览器窗口*/
.集装箱{
位置：固定；
宽度：100%；
身高：100%；
排名：0；
左：0；
z指数：1000；
}
/*这有一点水平间距，但居中，占据了整个屏幕的高度*/
.项目{
位置：绝对位置；
最小高度：100%；
排名：0；
左：0；
溢出y：自动；
文本对齐：居中；
宽度：计算（100%-200px）；
利润率：0.100px；
}
.项目img{
最大宽度：100%；
保证金：自动；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
}

---

所以，我有一些东西在工作——但它仍然有一个问题（将一个更大的问题简化为一个更小的问题）

/*此元素仅填充整个浏览器窗口*/
.集装箱{
位置：固定；
宽度：100%；
身高：100%；
排名：0；
左：0；
z指数：1000；
}
/*这有一点水平间距，但居中，占据了整个屏幕的高度*/
.项目{
位置：绝对位置；
身高：100%；
排名：0；
左：0；
溢出y：自动；
文本对齐：居中；
宽度：计算（100%-200px）；
利润率：0.100px；
}
.物品箱{
背景图片：url（dummy.jpg）；
背景位置：中心；
背景尺寸：100%自动；
背景重复：无重复；
宽度：100%；
最小高度：100%；
}
.项目img{
最大宽度：100%；
不透明度：0！重要；
最大宽度：100%；
}

---

所以，我有一些东西在工作——但它仍然有一个问题（将一个更大的问题简化为一个更小的问题）

/*此元素仅填充整个浏览器窗口*/
.集装箱{
位置：固定；
宽度：100%；
身高：100%；
排名：0；
左：0；
z指数：1000；
}
/*这有一点水平间距，但居中，占据了整个屏幕的高度*/
.项目{
位置：绝对位置；
身高：100%；
排名：0；
左：0；
溢出y：自动；
文本对齐：居中；
宽度：计算（100%-200px）；
利润率：0.100px；
}
.物品箱{
背景图片：url（dummy.jpg）；
背景位置：中心；
背景尺寸：100%自动；
背景重复：无重复；
宽度：100%；
最小高度：100%；
}
.项目img{
最大宽度：100%；
不透明度：0！重要；
最大宽度：100%；
}

您可以使用jsfiddle@ManojBabuBalaraman完成。对不起，本来应该这样做的。你能用jsfiddle@ManojBabuBalaraman完成。抱歉--本来应该这样做。这是一个“足够好”的解决方案，因为客户端预期大多数用户不会担心点击图像，而实际上图像仍然存在。这是一个“足够好”的解决方案，因为客户端预期大多数用户不会担心点击图像，事实上，图像仍然存在。