DIV容器顶部内容被截断求助：多种CSS布局调试无效

• 给body添加min-height: 100vh，确保元素至少占满整个视口高度，避免flex居中时因容器高度不足导致内容被截断：

body {
  background-color: hsl(233, 47%, 7%);
  padding: 0;
  margin: 0;
  font-family: 'Lexend Deca', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh; /* 新增这行 */
}

• 给main-container添加上下外边距，避免内容紧贴视口边缘（可根据需求调整数值）：

.main-container {
  width: 85vw;
  height: auto;
  background-color: hsl(244, 38%, 16%);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 2rem 0; /* 新增上下外边距 */
}

原因分析 #

当前body未设置最小高度，默认高度仅由内容撑开。使用display: flex结合align-items: center时，若内容高度超过视口，body高度会随内容扩展，但居中逻辑基于body的初始视口高度，导致顶部内容被挤出视口外。添加min-height: 100vh后，body至少占满视口高度，flex居中会在视口范围内垂直居中容器，同时允许body随内容高度自然扩展，解决滚动时顶部内容截断的问题。

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