title: Using CSS to auto resize & center popup
body: <p>I'm trying to have a popup that auto sizes to fit content based on screen resolution, while also remaining in the dead center of the screen both horizontally &amp; vertically.</p>
  
  <p>This is where I'm at so far:</p>
  
  <pre><code>.reveal-modal {
      background: none no-repeat scroll 0 0 #eee;
      border-radius: 5px;
      width: 50%;
      height: 50%;
      left: 25%;
      top: 25%;
      padding: 2%;
      position: absolute;
      visibility: hidden;
      z-index: 101;
      }
  
  .reveal-child {
      display: block;
      position: relative;
      width: 100%;
      height: 100%;
      }
  </code></pre>
  
  <p>The effect is close, but still doesn't work in certain resolutions. In some places the container is too large while others it is too small. I'd ideally like the container to be only as big as the content requires.</p>
  
  <p>The demo can be viewed on 104.131.228.107 and clicking the Register button</p>