center div inside the browser viewing window

I have a div and I want to center it vertically within the browser view.

In other words, if the user scrolled down, I want the div to b开发者_Python百科e shown at the same center position within the current Y axie that the user is viewing.

Thanks

Here you go, try this:

div {
    position: fixed;
    top: 50%;
    height: 100px;
    width: 200px;
    background: red;
    margin-top: -50px; /* half the div's height */
}