title: Is there a way I can use css3 calc to place a dialog in the center of my screen?
body: <p>I am trying to use the following:</p>
  
  <pre><code>&lt;div class="center"&gt;
    ...
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.center{
      position: absolute;
      height: 50px;
      width: 50px;
      background:red;
      top:calc(50% - 50px/2);
      left:calc(50% - 50px/2);
  }
  </code></pre>
  
  <p>However it seems like the div is positioned not in the center of the viewport but in the center of the div that encloses it. </p>
  
  <p>How can I make it so the div is positioned in the center of the screen using calc ?</p>