ブラウザでズームイン/ズームアウトするときにコンテンツを定位置に保持する方法

Question

私は画像を入力したdivを持っていて、クリックしたときにページの一番下に表示される「ポジション：絶対」の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

あなたが位置を使用して試すことができます：を固定の代わりに、絶対使用して？