Question

在我的代码中，可能有数百个元素，具体取决于页面添加了多少图像，这意味着页面的高度可能在0到1000之间甚至更高。

如何将叠加div置于页面中间。网页或多或少都试图模仿Instagram，你可以拥有数百张图片，但是一旦你点击其中一张图片，叠加层仍然会设置在页面中间。

这是图像叠加的主要div。只要页面不超过页面的视图高度，这个div工作正常，如果高度太大而你不得不向下滚动，那么它会混淆垂直位置。我知道这个问题是因为我将底部设置为15％所以它需要考虑整个高度值。但我不知道如何解决这个问题。

.overlayImgContainer{
        position: absolute;
        height: 70%;
        width: 120%;// (page is set to 960px this add a bit more room)
        z-index: 1;
        bottom: 15%;
        left: -10%;
        background-color: rgba(0,0,0,0.5);
        overflow-x: hidden;
        border-radius: 5px;
        text-align: center;
}

Answer 1

你可以使用flexbox。

<强> CSS

.wrapper {
   display: flex;
   align-items: center;
   justify-content: center;
}

<强> HTML

<div class="wrapper">
   <div>...</div>
</div>

如何从未知的动态高度垂直居中div？

1 个答案: