Flexbox：对齐内容：中心不会留下足够的垂直空间

Question

我正在为我的应用程序构建一个带有flexbox的布局。 我应该显示数据的模式通过以下代码垂直和水平居中：

  .modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 100;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: space-around;
      margin: auto;
      padding: 20px;
      overflow-y: auto;
    }

当高度足以显示所有模态时，它在所有浏览器上都能正常工作，但是当高度不够时，即使使用滚动条也无法达到模态的顶部：

正如您从图像中看到的那样，即使滚动条到达顶角，仍然有部分模态隐藏在其上方。 如果我删除了该属性：

      justify-content: space-around;

它有效，但随后模态不再居中：

我该如何解决这个问题？

Answer 1

当您使用justify-content: center与flex-direction: column结合使用时，当空间不足时，灵活项目会在顶部和底部溢出，并且它会按设计完成。

• https://www.w3.org/TR/css-flexbox-1/#valdef-justify-content-center

从justify-content: center移除modal并在其子级上使用margin: auto 0，即

.modal > div {
  margin: auto 0;
}