Question

我使用以下HTML结构：

<div class="imgview_overlay" id="imageviewer">
    <div class="overlay_content">
        <div class="overlay_inner" id="overlay_img_div">
            <img id="overlay_img" alt="overlayed_image" style="visibility: hidden;" />
        </div>
    </div>
</div>

使用以下CSS：

.imgview_overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.2); visibility: hidden; z-index: 500; }
.overlay_content { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; overflow: auto; }
.overlay_inner { display: inline-block; }

以覆盖范围内的<img>标记水平和垂直居中。

overflow: auto;完成了它的工作，但不正确。图像的顶部（当页面缩小时）不会出现。举个例子，看看this小提琴。关于如何解决这个问题的任何想法？

Answer 1

这是justify-content: center; align-items: center的预期行为：它们强制将flex项目置于中心位置。由于您无法滚动到负值，左上角的溢出部分将保持隐藏状态。

相反，我建议使用auto margins进行居中。没有可用的空间，他们不会强迫对中。

.imgview_overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .2);
  z-index: 500;
}
.overlay_content {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: auto;
}
.overlay_inner {
  margin: auto;
}

<div class="imgview_overlay" id="imageviewer">
  <div class="overlay_content">
    <div class="overlay_inner" id="overlay_img_div">
      <img id="overlay_img" alt="overlayed_image" src="http://lorempixel.com/800/400/" />
    </div>
  </div>
</div>

Flexbox溢出 - 缺少元素的顶部？

1 个答案: