如何使用自动溢出在div中居中行

经过多次实验,我终于找到了以下解决方案:

html格式:

<div class="scroll">
    <div class="table">
        <div class="container">
            <div class="row" ></div>
            <div class="row" ></div>
            ...
        </div>
    </div>
</div>

css:

.scroll {
    overflow-y: auto;
    height: 80px;
}
.table {
    display: table;
    height: 100%;
    width: 100%;
}

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

看见 http://jsfiddle.net/ZCdPG/ 以便全面实施。

虽然它可以工作,但不幸的是,它需要为单个容器嵌套三个级别。Web组件会在一定程度上缓解这种情况,但真正的问题是CSS中没有真正的垂直居中支持,只有通过黑客才能实现常见的用例。