如何使用自动溢出中心在格列

Question

我有多少“行”，我想已经组合在一起，并在他们的容器中心，somethign像这样的：

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

得到它的正确居中行我发现，最好的方法是使用下面的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中没有对垂直居中的真正支持，并且常见用例只能通过黑客来实现。