html - 如何在不切断内容的情况下垂直居中元素并处理溢出

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 会被切断 - 尽管提供了 overflow-y: auto;属性。

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

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

Answer 1

一种可能的解决方案是不在 .aligned 上实际使用 justify-content: center;，而只是将该容器自身垂直居中。为此，您可以使用 margin: auto 如下所示:

.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>