如何在页面头部下方的剩余屏幕高度中垂直居中div元素？

我完全懂你的困扰——想用Flexbox让内容在Header下方的剩余屏幕高度里垂直居中，但height:100vh会让容器超出视口，height:100%又完全没效果。这其实是因为父元素的高度没有正确继承视口高度，导致子元素的百分比高度无法生效。

问题根源拆解 #

• 你给body设置了100vh，但.App元素默认是块级元素，高度为auto（只包裹内部内容），所以.content-wrapper的height:100%是相对于.App的高度，而非整个视口高度，自然起不到作用。
• 如果直接给.content-wrapper设100vh，它会占满整个视口高度，加上Header本身的高度就会超出屏幕，导致滚动条出现，居中位置也会偏离预期。

最优解决方案：用Flexbox垂直分配空间 #

让.App成为Flex容器，设置垂直方向布局，然后让.content-wrapper自动占据Header之外的所有剩余空间：

修改你的CSS代码如下：

body {
  margin: 0;
  background: black;
  height: 100vh;
}
.App {
  font-family: sans-serif;
  text-align: center;
  /* 新增：让App成为垂直方向的Flex容器 */
  display: flex;
  flex-direction: column;
  height: 100%; /* 继承body的100vh高度 */
}
header {
  padding: 24px;
  color: white;
  border: 1px solid white;
  /* Header会自动适应内容高度，不占用剩余空间 */
}
.content-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  /* 关键：让content-wrapper占据剩余所有空间 */
  flex: 1;
  /* 移除原来的height:100% */
}
.content {
  border: 1px solid orange;
  padding: 24px;
  width: 100%;
}

备选方案：CSS Grid布局 #

如果你更喜欢Grid的写法，也可以这样设置.App：

.App {
  font-family: sans-serif;
  text-align: center;
  display: grid;
  grid-template-rows: auto 1fr; /* 第一行自适应Header高度，第二行占剩余空间 */
  height: 100%;
}

.content-wrapper的Flex居中样式保持不变，同样能实现预期效果。

这两种方法都能让.content-wrapper精准占据Header下方的剩余视口高度，同时用Flexbox实现内容的垂直居中，完全不会出现超出视口的问题。

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