title: Getting inline HTML/JavaScript popup to appear in the middle of screen regardless of resolution
body: <p>I am using the following Javascript and CSS to create popups:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      Sys.debug = true;
      var popup;
      Sys.require(Sys.components.popup, function () {
          popup = Sys.create.popup("#popup", {
              parentElementID: "target",
          });
      });
      var popup2;
      Sys.require(Sys.components.popup, function () {
          popup2 = Sys.create.popup("#popup2", {
              parentElementID: "target",
          });
      });
  &lt;/script&gt;
  
  #popup
  {
      width: 400px;
      height: 250px;
      overflow: scroll;
      background-color: #EAFDB3;
      border: solid 2px black;
  }
  #popup2
  {
      width: 400px;
      height: 250px;
      background-color: #EAFDB3;
      border: solid 2px black;
  }
  </code></pre>
  
  <p>The location these popups appear is done with:</p>
  
  <pre><code> &lt;span id="target" style="position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -100px;"&gt;&lt;/span&gt;
  </code></pre>
  
  <p>The content of the popup goes between:</p>
  
  <pre><code>&lt;div id="popup" style="background: #EAFDB3; color: #000; padding: 15px; margin: 0px"&gt;CONTENT &lt;/div&gt;
  </code></pre>
  
  <p>How can I get this popup to popup in the middle of the screen regardless of resolution?</p>