Question

我正在尝试将一组元素（每个元素可能是多行）垂直对齐到div的中间并且还要滚动溢出。我可以通过display：table和display：table-cell垂直对齐多行内容，但这似乎禁用了任何溢出处理。另外，我尝试使用行高技巧（将行高设置为包含div的高度），但垂直对齐似乎不适用于多行内容。

是否存在纯CSS解决方案？

这是一个小提琴，说明了我想要实现的目标：

http://jsfiddle.net/arxoq7oq/1/（已更新）

这是我的html：

<body>
    <p>Goal: Vertically align to middle with scroll upon overflow - Scenarios A and B need to be handled with the same code (unlike currently):</p>
    <div class="frame">
      Scenario A
      <div class="container green">
        <div class="item-list1">
          <div class="item">Item 1</div>
          <div class="item">Item 2 might wrap to multiple lines</div>
        </div>
      </div>
    </div>
    <div class="frame">
      Scenario B
      <div class="container green">
        <div class="item-list2">
          <div class="item">Item 1</div>
          <div class="item">Item 2 might wrap to multiple lines</div>
          <div class="item">Item 3</div>
          <div class="item">Item 4</div>
          <div class="item">Item 5</div>
          <div class="item">Item 6</div>
          <div class="item">Item 7</div>
        </div>
      </div>
    </div>

    <p>Can achieve vertical alignment to middle, but overflow scroll doesn't work:</p>
    <div class="frame">
      Scenario A
      <div class="container green">
        <div class="item-list1">
          <div class="item">Item 1</div>
          <div class="item">Item 2 might wrap to multiple lines</div>
        </div>
      </div>
    </div>
    <div class="frame">
      Scenario B
      <div class="container red">
        <div class="item-list1">
          <div class="item">Item 1</div>
          <div class="item">Item 2 might wrap to multiple lines</div>
          <div class="item">Item 3</div>
          <div class="item">Item 4</div>
          <div class="item">Item 5</div>
          <div class="item">Item 6</div>
          <div class="item">Item 7</div>
        </div>
      </div>
    </div>

    <p>Can achieve overflow scroll, but vertical alignment to middle doesn't work:</p>
    <div class="frame">
      Scenario A
      <div class="container red">
        <div class="item-list2">
          <div class="item">Item 1</div>
          <div class="item">Item 2 might wrap to multiple lines</div>
        </div>
      </div>
    </div>
    <div class="frame">
      Scenario B
      <div class="container green">
        <div class="item-list2">
          <div class="item">Item 1</div>
          <div class="item">Item 2 might wrap to multiple lines</div>
          <div class="item">Item 3</div>
          <div class="item">Item 4</div>
          <div class="item">Item 5</div>
          <div class="item">Item 6</div>
          <div class="item">Item 7</div>
        </div>
      </div>
    </div> 
  </body>

这是我的CSS：

body {
    margin:0;
    padding:0;
    font-family:Arial;
    font-size:100%;
}

.green {background:chartreuse;}

.red {background:crimson;}

.frame {display:inline-block;}

.container {
    display:table;
    width:10em;
    height:10em;
}

.item-list1 {
    display:table-cell;
    width:100%;
    height:100%;
    vertical-align:middle;
    overflow-y:auto; /* Does nothing with table-cell*/  
}

.item-list2 {
    width:100%;
    height:100%;
    overflow-y:auto;
    vertical-align:middle; /* Does nothing without table-cell */    
}

.item {
    margin:1em;
}

Answer 1

垂直对齐块的另一个技巧是：

.block-parent { 
    position: relative; 
}

.block-child {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

Answer 2

老实说，我不完全理解为什么以及如何使用这种技术，但确实如此!!!!!!它基于this article末尾描述的对齐技术。

结果请查看此JSFiddle。请注意方案A和B的第一个示例如何应用相同的类!!!

这是完成这项工作的CSS：

.container {
    display:block;
    width:10em;
    height:10em;
    overflow: auto;
}
.container:before{
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.item-list1 {
    display:inline-block;
    width: 8em;
    vertical-align:middle;
}

div中垂直对齐的多行元素，上溢滚动

2 个答案: