Html 垂直对齐粘性div内的图像

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

这是我的HTML代码：

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

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

部分{
显示器：flex；
弯曲方向：行；
}
第二节粘滞物{
高度：92vh；
背景颜色：紫色；
背景尺寸：封面；
背景位置：中心；
位置：粘性；
职位：-网络工具包粘性；
顶部：8vh；
宽度：50vw；
保证金：0；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
}
.粘滞{
宽度：90%；
高度：自动；
显示：块；
右边距：自动；
左边距：自动；
保证金：自动；
垂直对齐：中间对齐；
最高：50%；
}

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