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

Question

我有一个图像可能比用户的浏览器小，或者更大，在 div 中垂直居中。我想要一个仅 CSS 的解决方案，但根据我所做的大量研究，我开始持怀疑态度。

更准确地说：如果图像小于（高度）浏览器的高度，它应该垂直居中——如果图像高于浏览器的高度，应该有一个滚动条来查看其余部分的图像。这在 Firefox 中完美运行，但在 Chrome 中却不行——我不明白为什么。

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

/* This element just fills the entire browser window */

.container {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1000;
}
/* This has a little bit of horizontal spacing, but is centered and takes up the full height of the screen. */

.item {
  position: absolute;
  min-height: 100%;
  top: 0;
  left: 0;
  overflow-y: auto;
  text-align: center;
  width: calc(100% - 200px);
  margin: 0 100px;
}
.item img {
  max-width: 100%;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

<div class="container">
  <div class="item">
    <img src="dummy.jpg">
  </div>
</div>

Answer 1

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

/* This element just fills the entire browser window */

.container {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1000;
}
/* This has a little bit of horizontal spacing, but is centered and takes up the full height of the screen. */

.item {
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  overflow-y: auto;
  text-align: center;
  width: calc(100% - 200px);
  margin: 0 100px;
}

.item-box{
  background-image: url(dummy.jpg);
  background-position: center;
  background-size: 100% auto;
  background-repeat: no-repeat;
  width: 100%;
  min-height: 100%;
}

.item img {
  max-width: 100%;
  opacity: 0 !important;
  max-width: 100%;
}

<div class="container">
  <div class="item">
    <div class="item-box">
      <img src="dummy.jpg">
    </div>
  </div>
</div>

这与最初提出的问题一样有效，因为现在如果图像较小，框将居中，但如果图像太高，则会出现滚动条。在非 firefox 浏览器中没有中断。新问题是图像不是完全可选的，因为不可见图像固定在顶部而不是居中（原来的问题），所以你不能 "right-click to download image" 或任何整点的东西使用 img 标签，是为了。

关于如何使用此解决方案还有其他想法吗？

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

Vertically centering unknown content that might need a scrollbar in a div

html

css

position

google-chrome