html - 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 div in the middle of the screen:

.PopupPanel
{
    border: solid 1px black;
    position: absolute;
    left: 50%;
    top: 50%;
    background-color: white;
    z-index: 100;

    height: 400px;
    margin-top: -200px;

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

This CSS works fine as long as the page is not scrolled down.

But, if I place the button at the bottom of my page, when it is clicked, the div is displayed at the top, and the user has to scroll up to view the contents of the div.

I would like to know how to display the div in the middle of the screen, even when the page has been scrolled.

Answer 1

Change the position attribute to fixed instead of absolute.