html - Vertically align image inside a sticky 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!

question from:https://stackoverflow.com/questions/65850561/vertically-align-image-inside-a-sticky-div

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>