关于如何垂直居中流体元素的建议

Question

我在文章中有一些内容很流畅的内容，基本上我已将display:table应用于父元素，然后将display:table-cell和vertical-align:middle应用于我希望居中的元素。然而，我的问题是，我无法将我想要的元素置于父文章的100％高度，并且想知道如何实现这一目标？

我在jsfiddle上构建了一个示例：http://jsfiddle.net/f29Mr/

以下是示例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

我在这里做的更简单，但你应该很容易看出它是如何工作的：

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

链接到您上面的内容：http://jsfiddle.net/f29Mr/4/