Question

How is it possible to center a div both horizontally and vertically with respect to the screen, not the page. So that when the user scrolls down a long page, the div remains horizontally and vertically centered?

Answer 1

Here’s a pure CSS solution, note the percentages and negative margins.

http://jsfiddle.net/R7Xy2/

div {
    position: fixed;
    width: 200px;
    height: 200px;
    top: 50%;
    left: 50%;
    margin-left: -100px;
    margin-top: -100px;
}