将div（水平和垂直）居中，如果向下滚动则不要留在中间

Question

I have a div which is centered horizontally and vertically. The problem is that if I scroll down, the div scrolls down too and stays in the center. How can I fix that it doesn't scrolls down?

Right now it it perfectly in the center (I use the margin because of the size of the picture (200px x 200px)). But it stays in the middle when scrolling down.

 .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

You can wrap the image in an element set to height: 100vh; position: relative; height: 100vh; position: relative; so the img will be positioned relatively to an element that matches the viewport (so the img will be in the center of the viewport), and as you scroll, the parent element will stay in place on the page and the image will stay positioned relative to it.

 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

If you want the same behavior, but want your logo to always stay in the exact same location even as you scroll, change your position from absolute to fixed.

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

    position: fixed;

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

position: absolute means it's attach to its closest positioned ancestor

position: fixed attaches to the window itself