title: Center a 'div' in the middle of the screen, even when the page is scrolled up or down?
body: <p>I have in my page a button which when clicked displays a <code>div</code> (popup style) in the middle of my screen.</p>
  
  <p>I am using the following CSS to center the <code>div</code> in the middle of the screen:</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>This CSS works fine as long as the page is not scrolled down.</p>
  
  <p>But, if I place the button at the bottom of my page, when it is clicked, the <code>div</code> is displayed at the top, and the user has to scroll up to view the contents of the <code>div</code>.</p>
  
  <p>I would like to know how to display the <code>div</code> in the middle of the screen, even when the page has been scrolled.</p>