title: CSS Floating Pop Up: Tricky CSS Positioning
body: <p>I have a website that, upon clicking a link generates a div. </p>
  
  <p>Allow me to explain a little deeper. I have a table of "pages" in my CMS and I've added the ability to add new pages through a little popup div.</p>
  
  <p>My pop-up div is defined below the table, but is style="display:none" so it does not appear on the page. Upon clicking the Add New Page button, my javascript function fires a:</p>
  
  <pre><code>document.getElementById("addPage").style.display="block";
  </code></pre>
  
  <p>This allows the div to magically appear upon calling.</p>
  
  <p>However, here's my problem; I wish this div to appear central always but my standard margin:auto isn't allowing this to centre the div, as it still appears below the table (although right/left centred and z-index:999).</p>
  
  <p>Here is my CSS code:</p>
  
  <pre><code>#addPage{
   width:250px; 
   height:180px;
   background-color:#FFFFFF;
   border:1px #000000 solid;
   position:absolute;
   z-index:999;
   padding:10px;
  }
  </code></pre>