title: Overlay box appearing in the center of the screen
body: <p>I have some JS code that fades the background to a dark colour and opens a white modal window, like so:</p>
  
  <pre><code>function open_litebox(link) {
      var overlay_black = 'position:absolute;top:0%;left:0%;width:100%;height:100%;background:black;z-index:1001;opacity:0.5;';
      $('body').append('&lt;div style="' + overlay_black + '"&gt;&lt;/div&gt;');
      var overlay_white = 'position:absolute;top:25%;left:25%;padding:5px;background-color:white;z-index:1002;overflow:auto;';
      $('body').append('&lt;div style="' + overlay_white + '"&gt;&lt;p&gt;heeeyyy&lt;/p&gt;&lt;/div&gt;');
  }
  </code></pre>
  
  <p>But the problem is, it doesn't appear dead center in the screen. I want the modal window to be positioned in the dead center both vertically and horizontally, but I don't know what the width/height of the content inside the modal window is going to be so I can't set fixed values.</p>
  
  <p>Any help is appreciated, cheers.</p>