如何在页面的绝对中心 position 一个 div？

Question

Here's how I'm doing it and it does work:

#myDiv { background: red; width: 100px; height: 100px; margin-top: -50px; margin-left: -50px; position: absolute; top: 50%; left: 50%; }

<div id="myDiv"></div>

But the problem is when I scroll down the page, the div no longer appears in the center because it is positioned 50% off the top relative to the original view port height, not the current one. So I guess I would have to listen for a document scroll event and update the position of the div dynamically. Any idea how to do that?

Basically the effect I'm after is for the div to always be in the center even when the user scrolls.

or maybe there's even a pure css solution?

Answer 1

Use position: fixed; instead of position: absolute; The positioning (top, left etc) will remain the same, but in relation to the window, and not the document.

http://jsfiddle.net/jasongennaro/25WAg/

Answer 2

You're going to want position: fixed; .

To achieve the div in the center of the screen, you're going to want left: 50%; margin-left: -50px; left: 50%; margin-left: -50px;

Note that the negative margin-left is half of the container's width

Answer 3

#myDiv {
    background: red;
    width: 100px;
    height: 100px;
    margin: auto;
    position: fixed;
}

#container {
    width: 90%;
    height: 90%;
}

Then for your HTML:

<div id="container">
    <div id="myDiv">DATA</div>
</div>

Tell me if it works.