title: How to place DIV on top of all and on the middle of page?
body: <p>I have a page with a <code>form</code> and a <code>div</code>:</p>
  
  <pre><code>&lt;body&gt;
      &lt;form id="form1" runat="server"&gt;
          ...
      &lt;/form&gt;
      &lt;div id="wizardDiv" style="width: 100%; height: 100%;background-color:black;display:none"&gt;
          &lt;div style="background-color:#8DA5C6; z-index:999; width: 50%; margin: 0 auto;"&gt;                
             ...
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>On a button click, I make the <code>div</code> visible, and I want it to cover the whole page, while the inner <code>div</code> is right in the middle (in the center, both horizontally and vertically.) just <strong>like a popup modal</strong>.</p>
  
  <p><strong>To illustrate</strong>:
  <img src="https://i.stack.imgur.com/1YbAs.png" alt="enter image description here"></p>
  
  <p><strong>The current html fails the following:</strong></p>
  
  <ol>
  <li>The <code>div</code> is not covering the whole page, it is located after the <code>form</code>, instead overlaying it.</li>
  <li>The inner <code>div</code> is only horizontally centered and not vertically.</li>
  </ol>
  
  <p>What am I missing here? </p>
  
  <p>Is my approach is "browser-compatibility" safe? (Maybe I should look for a Jquery solution?)</p>
  
  <hr>
  
  <p><strong>Final Solution:</strong></p>
  
  <p>I ended up using:</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/8502019/how-to-place-div-on-top-of-all-and-on-the-middle-of-page/8502374#8502374">Didier G answer</a> for the overlay problem.</li>
  <li>Jquery to <a href="https://stackoverflow.com/questions/210717/using-jquery-to-center-a-div-on-the-screen">center the div on screen</a></li>
  <li>CSS3 for <a href="https://stackoverflow.com/questions/4567694/css-div-rounded-corners">rounding the corners of the div</a></li>
  </ul>