Question

I have some content inside an article that is fluid in size, basically I have applied display:table to the parent element and then display:table-cell and vertical-align:middle to the element I wish to center. My problem is however that Im unable to make the element I want to center 100% height of the parent article and was wondering how I can achieve this?

I have built an example on jsfiddle: http://jsfiddle.net/f29Mr/

And here is the sample css

.m-level-block {
    width: 91.66667%;
    float: left;
    margin-right: 0%;
    display: inline;
    margin-left: 4.16667%;
    margin-right: 95.83333%;
    background: black;
    margin-bottom: 10px;
}
.m-level-block .m-video-thumb {
    width: 18.18182%;
    float: left;
    margin-right: 0%;
    display: inline;
}
.m-video-thumb .video-stats-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}
.m-level-block .level-content {
    width: 81.81818%;
    float: right;
    margin-right: 0;
    display: inline;
    position: relative;
    display: table;
    height: 100%;
}
.m-level-block .level-content .level-info {
    padding: 2%;
    width: 55.55556%;
    display: table-cell;
    vertical-align: middle;
    max-height: 400px;
    height: 100%;
}

Answer 1

What I did here is simpler but you should easily see how this can work:

DEMO http://jsfiddle.net/f29Mr/3/

HTML

<div class="article">
    <div class="image">a</div>
    <div class="text">TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</div>
    <div class="stats">HELLO</div>
</div>

CSS

body, html {
    width: 100%;
    height: 100%;
}

.article {
    width: 90%;
    height: 20%;
    margin: 0 auto;
    border: 1px solid #666;
    display:table;
}

.article .image {
    width: 20%;
    height: 100%;
    background: #F00;
    display: table-cell;
}

.article .text {
    width: 60%;
    height: 100%;
    display: table-cell;
    vertical-align:middle;
}

.article .stats {
    height: 20%;
    width: 19%;
    display:inline-block;
    vertical-align:middle;
    display: table-cell;
}

LINK TO YOUR CONTENT WITH ABOVE APPLIED: http://jsfiddle.net/f29Mr/4/