title: Vertical align inside table-row
body: <p>How to align vertically content inside #container which has a display of table-row;?</p>
  
  <p>_#content may have inline or block element or even a child with fixed height. It just need to be aligned vertically no matter how.</p>
  
  <p>The bottom div should always be at the bottom of the screen and the height of the top div should be equal to the remaining height.</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;span&gt;content&lt;/span&gt;
      &lt;div&gt;content&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="wrap"&gt;
      &lt;img src="http://www.boylesoftware.com/blog/wp-content/uploads/2014/07/280x250_css3_logo.jpg" height="100"&gt;
  &lt;/div&gt;    
  
  body {
      padding: 0;
      margin: 0;
      color: #fff;
      font: 18px "bonvenocf";
      height: 100%;
      background: #ccc;
      max-height: 1080px;
      position: relative;
      display: table;
      width: 100%;
  }
  
  html {
      height: 100%;
      max-height: 1080px;
  }
  
  #wrap {
      text-align:center;  
      background: #1b1b1b;
      width: 100%;
      display: table-row;
  }
  
  #container {
      width: 100%;
      background: #0084ff;
      height:100%;
      display: table-row;
  }
  </code></pre>
  
  <p>This is my fiddle: <a href="http://jsfiddle.net/4tvjvwpk/3/" rel="noreferrer">http://jsfiddle.net/4tvjvwpk/3/</a></p>