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

Question

我有很多＆＃34;行＆＃34;我希望将它们组合在一起并集中在它们的容器中，有些像这样：

但是，行数是可变的，如果有足够的行来溢出设定的高度，我希望它能够滚动。

我发现让它正确居中行的最佳方法是在容器上使用以下css：

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

但是，由于容器没有display:block，因此设置overflow:auto不起作用。在表格单元格中放置一个滚动div也不起作用，因为滚动div需要设置一个高度，并且会破坏垂直居中。

Answer 1

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

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中没有真正的垂直居中支持，只有黑客才能实现常见的用例。