在粘性 div 内垂直对齐图像

Question

I know this is a question that has been answered before but for some reason, I can't get anything to work. I have an image inside a div that is sticky. The image is currently aligned in the center horizontally but I can't get it to align in the center vertically. The image is stuck to the top of the div.

This is my HTML code:

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

And this is my CSS code:

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%;
}

Any help would be appreciated, thank you!

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>