スクロールダウンの場合、divを中央に置いて中央に留まらないでください。

Question

divを水平および垂直に中央に配置しています。問題は、私が下にスクロールすると、divもスクロールして中央にとどまるということです。スクロールダウンしないように私はどうすれば修正できますか？

今のところ、それは完全に中央にあります（画像のサイズ（200px x 200px）のため余白を使います）。しかし、それはスクロールダウンの途中にとどまります。

.logo { 
 
    width: 200px; 
 
    height: 200px; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    margin-top: -100px; 
 
    margin-left: -100px; 
 
    }

<image class="logo" src="http://placehold.it/200x200/fc0"></image>

Answer 1

ウィンドウ自体にそれほどimgは次のようになります。絶対にそれは最も近い位置の先祖に

位置を添付します意味します（ビューポートの中心にあるのでimgが表示されます）、スクロールすると、親要素はページ上の所定の位置にとどまり、画像は相対的な位置にとどまります。

body { 
 
    margin: 0; 
 
    height: 500vh; 
 
} 
 
div { 
 
    height: 100vh; 
 
    position: relative; 
 
} 
 
.logo { 
 
    width: 200px; 
 
    height: 200px; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%,-50%); 
 
}

<div> 
 
    <img class="logo" src="http://kenwheeler.github.io/slick/img/fonz1.png"> 
 
</div>

Answer 2

あなたは同じ動作をしたいが、あなたのロゴは常に絶対的から固定に自分の位置を変更し、あなたがスクロールしたとしてもまったく同じ場所に滞在したい場合。

.logo { 
    width: 200px; 
    height: 200px; 

    position: fixed; 

    top: 50%; 
    left: 50%; 
    margin-top: -100px; 
    margin-left: -100px; 
    } 

位置：固定アタッチをあなたがheight: 100vh; position: relative;に設定要素で画像をラップすることができます