如何垂直居中flex-grow:1容器的子flex元素？

嘿，你已经搭好了核心的Flexbox布局框架，只需要补全一点点细节就能达成目标！我帮你完善代码并拆解每个部分的作用：

完整可运行代码 #

body { 
  margin: 0; 
} 
#wrapper { 
  display: flex; 
  flex-direction: column; 
  min-height: 100vh; 
} 
header { 
  padding: 2em 0; 
  background: cyan; 
  text-align: center; /* 可选：让页眉文字居中 */
} 
main { 
  flex-grow: 1; 
  background: turquoise; 
  /* 直接在main上用Flex实现居中，省去额外嵌套div的步骤 */
  display: flex;
  justify-content: center;
  align-items: center;
} 
/* 如果你想保留原有的main嵌套div结构，也可以用这段代码替代上面的main样式：
main div { 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  height: 100%; 
}
*/
footer { 
  padding: 2em 0; 
  background: darkcyan; /* 给页脚加背景色方便区分 */
  text-align: center; /* 可选：让页脚文字居中 */
}

<div id="wrapper">
  <header>这是页眉区域</header>
  <main>
    <div>这是需要垂直水平居中的主内容</div>
  </main>
  <footer>这是固定在页面底部的页脚</footer>
</div>

关键逻辑解释 #

• 固定页脚的核心：#wrapper 设置 min-height: 100vh 让容器占满整个视口高度，配合 flex-direction: column 让子元素垂直排列；给 main 加 flex-grow: 1 后，main会自动填充页眉和页脚之外的所有剩余空间，自然把页脚“挤”到页面底部。
• 主内容居中的两种方式：要么直接在main上用Flex布局实现居中（更简洁），要么保留你原来的嵌套div结构，只要确保div的height: 100%能继承main的高度，同样可以实现居中效果。
• 细节优化：添加的text-align: center和背景色都是可选的，你可以根据自己的设计需求调整样式。

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