如何在瀏覽器上放大和縮小時保持內容的位置

Question

我有一個div，在那裏我輸入了一張圖片，而我「位置：絕對」是另一個div，點擊時會將您帶到頁面底部。但是，當你縮小時，它會保持原位，但是當你縮小它時，會向下移動並離開圖像分隔。我在問，如何在放大和縮小瀏覽器時將內容保持在中心位置。我搜索了所有堆棧和其他網站，但找不到解決方案。

HTML

#pic-div { 
 
\t width: 100%; 
 
\t height: 700px; 
 
\t margin: 0 auto; 
 
\t overflow: hidden; 
 
} 
 
#pic-button { 
 
\t width: 100px; 
 
\t height: 100px; 
 
\t margin: 0 auto; 
 
} 
 
#down-button { 
 
\t max-width: 200px; 
 
\t max-height: 200px; 
 
\t background-color: black; 
 
\t border-style: none; 
 
\t color: white; 
 
\t font-family: 'Coiny', cursive; 
 
\t position: absolute; 
 
\t cursor: pointer; 
 
\t margin: 0 auto; 
 
\t margin-top: 500px; 
 
} 
 
#down-button:hover { 
 
\t background-color: grey; 
 
}

<div id="pic-div"> 
 
<div id="welcome-pic"> <img id="pic-welcome" src="luxpics/logobar.jpg"> 
 
    <div id="pic-button"> 
 
    <button id="down-button">LET'S START</button> 
 
    </div> 
 
</div> 
 
</div

Answer 1

試試這個

#down-button { 
    max-width: 200px; 
    max-height: 200px; 
    background-color: black; 
    border-style: none; 
    color: white; 
    font-family: 'Coiny', cursive; 
    position: absolute; 
    cursor: pointer; 
    margin: 0 auto; 
    bottom: 25px; 
    //margin-top: 500px; 
} 

Answer 2

你可以嘗試使用位置：固定，而不是使用絕對？