div 内垂直对齐的多行元素，溢出时滚动答案

【问题标题】：Vertically aligned multi-line elements within div with scroll on overflowdiv 内垂直对齐的多行元素，溢出时滚动
【发布时间】：2014-10-26 17:17:41
【问题描述】：

我正在尝试将一组元素（每个元素可能是多行）垂直对齐到 div 的中间，并且还滚动溢出。我可以通过 display:table 和 display:table-cell 垂直对齐多行内容，但这似乎禁用了任何溢出处理。另外，我尝试使用 line-height 技巧（将 line-height 设置为包含 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;
}

【问题讨论】：

标签： html css

【解决方案1】：

老实说，我不完全理解这种技术为什么以及如何工作，但它确实！！！！！！！它基于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;
}

【讨论】：

【解决方案2】：

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

.block-parent { 
    position: relative; 
}

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

【讨论】：

感谢您提到这个技巧。但是，必须指定子块的高度才能使溢出处理起作用，并且内容的大小是可变的。因此，这并不能仅使用 CSS 解决问题，但它可能是使用 javascript 解决问题的最佳方法。