在粘性 div 内垂直对齐图像

Question

我知道这是一个以前已经回答过的问题，但由于某种原因，我什么都做不了。 我在一个 div 中有一个粘性的图像。 图像当前水平居中对齐，但我无法让它垂直居中对齐。 图像粘在 div 的顶部。

这是我的 HTML 代码：

<section>
    <div class="stickyImg img-1">
        <img src="MainImgCrop.jpeg" class="stickyImg">
    </div>
</section>

这是我的 CSS 代码：

section {
    display: flex;
    flex-direction: row;
}

section div.stickyImg {
    height: 92vh;
    background-color: purple;
    background-size: cover;
    background-position: center;
    position: sticky;
    position: -webkit-sticky;
    top: 8vh;
    width: 50vw;
    margin: 0;
}

.stickyImg {
    width: 90%;
    height: auto;
    display: block;
    margin-right: auto;
    margin-left: auto;
    margin: auto;
    vertical-align: middle;
    top: 50%;
}

任何帮助将不胜感激，谢谢！

Answer 1

 section { display: flex; flex-direction: row; } section div.stickyImg { height: 92vh; background-color: purple; background-size: cover; background-position: center; position: sticky; position: -webkit-sticky; top: 8vh; width: 50vw; margin: 0; display:flex; flex-direction:column; justify-content:center; align-items:center; }.stickyImg { width: 90%; height: auto; display: block; margin-right: auto; margin-left: auto; margin: auto; vertical-align: middle; top: 50%; }

 <section> <div class="stickyImg img-1"> <img src="MainImgCrop.jpeg" class="stickyImg"> </div> </section>