After much experimentation, I have finally arrived at the following solution:
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;
}
See http://jsfiddle.net/ZCdPG/ for a full implementation.
Although it works, it is unfortunate that it requires three levels of nesting for a single container. Web components would somewhat alleviate this, but the real problem is that there is no real support for vertical centering in CSS, and a common use case can only be achieved with hacks.