title: How to make a floating box in the center of the screen with responsive layout?
body: <p>I am trying to get into responsive design/layout with Bootstrap and CSS, but I am kind of confused of how could a change a box to be in the center of the screen.</p>
  
  <p>I have a login pane that in Google Chrome has size 277x256 (that size could fit many smartphone screens). So I made a CSS like that:</p>
  
  <pre><code>.login .pane {
      position: absolute;
      top: 50%;
      left: 50%;
      margin: -128px -138.5px; /* half of the size in Google Chrome */
      background: #f0f0fd;
      background: rgba(240,240,253,0.90);
      padding: 22px 32px;
  }
  </code></pre>
  
  <p>You can see the complete code in: <a href="http://jsfiddle.net/H5Qrh/1/" rel="nofollow">http://jsfiddle.net/H5Qrh/1/</a></p>
  
  <p>=== UPDATE ===</p>
  
  <p>I made a cleaner code and tried using Absolute Centering instead of Negative Margins: </p>
  
  <pre><code>.center-pane {
      margin: auto;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      max-width: 277px;
      height: 320px;
  }
  </code></pre>
  
  <p>My updated Fiddle: <a href="http://jsfiddle.net/H5Qrh/3/" rel="nofollow">http://jsfiddle.net/H5Qrh/3/</a></p>
  
  <p>Now the footer is above the box.. that shouldn't occour.</p>