如何让section内的div垂直居中？section高度无法占满main问题排查

问题分析 #

你设置section的height: 100%无法填满main，核心原因是：main元素虽然通过flex: 1占据了body的剩余空间，但它默认是块级元素，没有明确的高度约束机制，导致子元素section的百分比高度无法基于main的实际高度计算。

解决方案 #

有两种简单可行的修复方式：

方式一：让main成为Flex容器（推荐）

直接给main添加display: flex，这样section会自动填充main的高度，同时可以把居中逻辑直接放在main里，简化代码：

修改后的CSS：

body {
  background-color: gray;
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
body main {
  flex: 1;
  display: flex; /* 添加这行 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

header {
  background-color: white;
}

footer {
  background-color: white;
}

/* 简化section样式，无需再设置height和flex */
section:has(> div.multi-step-form) div.multi-step-form form {
  background-color: white;
}

方式二：给main设置明确的高度约束

如果不想修改main的display属性，可以给main添加height: 100%，同时确保body的高度能被正确继承：

修改后的CSS：

body {
  background-color: gray;
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  height: 100dvh; /* 添加这行，让body有明确高度 */
}
body main {
  flex: 1;
  height: 100%; /* 添加这行 */
}

header {
  background-color: white;
}

footer {
  background-color: white;
}

section:has(> div.multi-step-form) {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
section:has(> div.multi-step-form) div.multi-step-form form {
  background-color: white;
}

说明 #

第一种方式更符合Flex布局的设计逻辑，不需要依赖百分比高度的继承链，代码更简洁也更健壮，推荐使用。

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