Vertical align inside table-row

Question

How to align vertically content inside #container which has a display of table-row;?

_#content may have inline or block element or even a child with fixed height. It just need to be aligned vertically no matter how.

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.

<div id="container">
    <span>content</span>
    <div>content</div>
</div>
<div id="wrap">
    <img src="http://www.boylesoftware.com/blog/wp-content/uploads/2014/07/280x250_css3_logo.jpg" height="100">
</div>    

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;
}

This is my fiddle: http://jsfiddle.net/4tvjvwpk/3/

Answer 1

vertical-align is only applicable to inline-level and table-cell elements.

Hence you could add a div and change its display type to table-cell and add vertical-align: middle to the element as follows:

EXAMPLE HERE

<div id="container">
    <div class="cell">
        <span>content</span>
        <div>content</div>
    </div>
</div>

.cell {
    vertical-align: middle;
    display: table-cell;
}