Css 关于如何在流体元素中垂直居中内容的建议

我在一篇文章中有一些大小不一的内容，基本上我将

display:table

应用于父元素，然后

display:table cell

和

vertical align:middle

应用于我希望居中的元素。然而，我的问题是，我无法将我想要的元素置于父文章100%高度的中心，我想知道如何才能做到这一点

我在JSFIDLE上构建了一个示例：

下面是示例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%;
}

---

我在这里所做的比较简单，但您应该很容易看到这是如何工作的：

演示

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>

---

链接到您的内容，并应用上述内容：

嗨，这不是垂直居中的.m-level-block吗？是的，您是对的。对不起，我没有得到你需要的东西。让我试着纠正这个问题。嘿，这很好，我需要我的代码像在原始JSFIDLE中一样结构化？检查完我答案下面的链接，必须删除.level content div和class

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