在粘性 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>