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/