title: Vertical align middle div inside div
body: <p>Examining this HTML:</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
      &lt;div class="content"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="footer"&gt;
      &lt;hr /&gt;
      &lt;p&gt;some text&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and CSS:</p>
  
  <pre><code>.footer {
      position: absolute;
      height: 100px;
      width: 100%;
      bottom: 0;
      background-color: black;
  }
  
  .wrapper {
      padding-bottom: 100px;
      background-color: blue;
      height: 100%;
  }
  
  .content {
      width: 200px;
      height: 100px;
      margin: auto;
      background-color: green;
  }
  
  html, body {
      width: 100%;
      height: 100%;
  }
  </code></pre>
  
  <p>You can see that <code>footer</code> have position absolute and stay at the bottom of the page. <code>wrapper</code> will cover the remaining space and contain a <code>content</code> inside it. I want to vertical-align <code>content</code> without breaking the current layout. Do you have any suggestion?</p>
  
  <p><a href="http://jsfiddle.net/trongcuong1710/eEh8u/" rel="nofollow">Here</a> is JSFiddle link. (Note: jsfiddle doesn't work as expected, there always a space beneath <code>footer</code>, this behavior doesn't occur when run the HTML file in browser).</p>
  
  <p>Note: I don't want to use fixed height for <code>wrapper</code>, I want it covers all the remaining space, so please don't suggest me to use <code>line-height</code></p>
  
  <p>I tried the example <a href="http://phrogz.net/CSS/vertical-align/" rel="nofollow">here</a> but it doesn't seem to work</p>
  
  <p><strong>NOTE</strong> I want the layout easy to modify (like add a header or content at the top) without breaking it therefore I want to avoid using absolute position on <code>wrapper</code> and <code>content</code></p>
  
  <p><strong>NOTE 2</strong> Sorry for not to clarify, actually, <code>content</code> doesn't have fixed size, its size depend on the content inside it, so the solution using <code>negative margin</code> doesn't work as I mentioned above</p>