Center a 'div' in the middle of the screen, even when the page is scrolled up or down?

Question

I have in my page a button which when clicked displays a div (popup style) in the middle of my screen.

I am using the following CSS to center the

Answer 1

Correct Method is

.PopupPanel
{
    border: solid 1px black;
    position: fixed;
    left: 50%;
    top: 50%;
    background-color: white;
    z-index: 100;
    height: 400px;
    margin-top: -200px;

    width: 600px;
    margin-left: -300px;
}