CSS实现文本垂直水平居中+滚动，顶部内容丢失问题求助

问题背景 #

希望在内容容器中实现文本的水平与垂直居中，完整页面包含wrapper、header、footer及content容器。针对特定页面，需让content容器内文本同时水平垂直居中，但文本行数超出容器尺寸时，顶部文本会被隐藏，有时甚至溢出侵入header和footer区域。

基于W3示例制作了可复现问题的简化示例，代码如下：

CSS代码 #

#main {
  width: 220px;
  height: 300px;
  border: 1px solid black; 
  display: flex;
  align-items: stretch;
}

#main div {
  flex: 1;
  border: 1px solid black;
  display: flex;
  overflow-y: scroll;
  align-items: center;
}

HTML代码 #

<h2>align-items: stretch</h2>

<div id="main">
    <div style="background-color:coral;min-height:30px;">RED</div>
    <div style="background-color:lightblue;min-height:50px;">BLUE</div>  
    <div style="background-color:lightgreen;min-height:190px;">
The number is: 1<br>
The number is: 2<br>
The number is: 3<br>
The number is: 4<br>
The number is: 5<br>
The number is: 6<br>
The number is: 7<br>
The number is: 8<br>
The number is: 9<br>
The number is: 10<br>
The number is: 11<br>
The number is: 12<br>
The number is: 13<br>
The number is: 14<br>
The number is: 15<br>
The number is: 16<br>
The number is: 17<br>
The number is: 18<br>
The number is: 19<br>
The number is: 20
    </div>
</div>

<p><b>Note:</b> Internet Explorer 10 and earlier versions do not support the align-items property.</p>

问题：示例中的前7行文本为何会消失？

原因分析 #

问题核心在于#main div的样式冲突：

• 给子div设置display: flex和align-items: center后，div内部的内容块会被整体垂直居中。
• 当内容高度超过div的可用高度时，内容块的高度会自然超出div范围，但flex垂直居中的特性会让超出部分同时向上、向下延伸。
• 加上overflow-y: scroll后，滚动视口是div的固定范围，而内容块处于居中状态，导致初始时内容块的顶部区域被div上边界裁剪，表现为前几行文本消失。

解决方案 #

要实现「内容少时垂直居中，内容多时可滚动且不隐藏顶部」，需将居中逻辑与滚动逻辑分离：

方案1：嵌套内层内容容器 #

给文本添加内层容器，让内层容器负责滚动，外层flex容器仅处理居中：

#main {
  width: 220px;
  height: 300px;
  border: 1px solid black; 
  display: flex;
  align-items: stretch;
}

#main div {
  flex: 1;
  border: 1px solid black;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden; /* 隐藏外层溢出 */
}

#main div .content {
  overflow-y: scroll;
  padding: 0 10px; /* 可选：添加内边距优化显示 */
  max-height: 100%; /* 限制内容容器高度不超过父元素 */
}

对应修改HTML：

<div style="background-color:lightgreen;min-height:190px;">
  <div class="content">
The number is: 1<br>
The number is: 2<br>
<!-- 剩余文本内容 -->
  </div>
</div>

方案2：调整flex对齐逻辑（无需嵌套） #

去掉align-items: center，改用flex-direction: column配合justify-content: center，让内容自动适配容器：

#main div {
  flex: 1;
  border: 1px solid black;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
}

此方案下，内容高度小于容器时会垂直居中；内容超出时，容器自动出现滚动条，且顶部内容不会被隐藏。

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