如何在不切断内容的情况下垂直居中项目并处理溢出

Question

我已经成功地将边栏上的项目与屏幕中央对齐。但是当内容溢出时，它会使用这种方法被剪掉。

这里有一个片段来演示。

.container {
  background-color: aqua;
  display: flex;
  flex-direction: column;
  height: 200px;
  padding: 10px;
  width: 120px;
}

.aligned {
  background-color: yellow;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  margin: 10px 0;
  overflow-y: auto;
}

<div class="container">
  <div>Sider Header</div>
  <div class="aligned">
    <button>Item 1</button>
    <button>Item 2</button>
    <button>Item 3</button>
    <button>Item 4</button>
    <button>Item 5</button>
    <button>Item 6</button>
    <button>Item 7</button>
    <button>Item 8</button>
    <button>Item 9</button>
    <button>Item 10</button>
    <button>Item 11</button>
    <button>Item 12</button>
  </div>
  <div>Sider Footer</div>
</div>

如上所示，aligned div 中的顶部元素在内容过多无法放入 space 时被截断 - 尽管提供了 overflow-y: auto; 属性.

如果您增加容器高度或删除一些按钮，您可以看到它成功地垂直居中。

在内容不溢出的情况下，如何解决内容被截断的问题，同时垂直居中对齐

Answer 1

一个可能的解决方案是不在 .aligned 上实际使用 justify-content: center;，而只是将容器本身垂直居中。为此，您可以像这样使用自动保证金：

.container {
  background-color: aqua;
  display: flex;
  flex-direction: column;
  height: 200px;
  padding: 10px;
  width: 120px;
}

.aligned {
  background-color: yellow;
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  margin: auto 0;
  overflow-y: auto;
  padding: 10px 0;
}

<div class="container">
  <div>Sider Header (potential overflow)</div>
  <div class="aligned">
    <button>Item 1</button>
    <button>Item 2</button>
    <button>Item 3</button>
    <button>Item 4</button>
    <button>Item 5</button>
    <button>Item 6</button>
    <button>Item 7</button>
    <button>Item 8</button>
    <button>Item 9</button>
    <button>Item 10</button>
    <button>Item 11</button>
    <button>Item 12</button>
  </div>
  <div>Sider Footer</div>
</div>

<div class="container">
  <div>Sider Header (less content)</div>
  <div class="aligned">
    <button>Item 1</button>
    <button>Item 2</button>
    <button>Item 3</button>
    <button>Item 4</button>
   
  </div>
  <div>Sider Footer</div>
</div>

如何在不切断内容的情况下垂直居中项目并处理溢出

How to center items vertically and handle overflows without cutting off content

html

css

overflow

vertical-alignment

flexbox