CSS实现容器无溢出时文本垂直居中、溢出时正常滚动

使用display: flex搭配align-items: center实现垂直居中时，内容会始终保持相对容器的居中定位。当内容高度超出容器max-height触发滚动后，内容顶部会被推出容器可视区域，且滚动条无法定位到被遮挡的顶部区域，最终出现顶部文本不可见、无法滚动查看的问题。

利用Flex布局中子元素margin: auto的特性实现居中和滚动的兼容：内容不足以撑满容器最小高度时，自动边距会分配剩余空间实现垂直居中；内容溢出时，自动边距失效，内容恢复顶部对齐，不会出现遮挡问题。

修复后的完整代码如下：

.container {
  margin-top: 4px;
  border-radius: 16px;
  overflow-y: auto;
  height: auto;
  min-height: 64px;
  max-height: 288px;
  padding: 12px;
  display: flex;
  justify-content: center;
}

.container p {
  margin-block: auto;
}

<div class="container">
  <p>Text goes here...</p>
</div>

• 内容较少、容器高度为64px最小值时，内部文本自动垂直居中
• 内容高度在64px-288px区间时，容器随内容高度自适应，文本正常排列
• 内容高度超过288px最大值时，容器自动出现纵向滚动条，所有文本可正常滚动查看，无顶部遮挡问题

内容的提问来源于stack exchange，提问作者Sophia Leal