title: How to make scrollbars appear when DIV doesn't have enough room but keep DIV centered?
body: <p>I want to create a centered form.  </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="profileContainer”&gt;…&lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#profileContainer {
    border-radius: 25px;
    background: #ffffff;
    padding: 10px;
    width: 100%;
    max-width: 760px;
    display: inline-block;
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
  </code></pre>
  
  <p>The problem is when the screen is vertically shorter, part of the form gets hidden, and no scrollbars appear to make it accessible: <a href="http://jsfiddle.net/tcou4dk3/2/">JSFiddle</a>.</p>
  
  <h3>Question:</h3>  
  
  <p>How do I get scrollbars to appear when vertical space alone is insufficient, but keep my div centered horizontally and vertically when there <em>is</em> enough space? </p>