能否用height:100%的Flex实现body内元素垂直居中而非100vh？

这事儿其实是两个不同CSS规则在搞鬼，我给你拆解清楚：

先搞懂百分比高度的坑 #

CSS里的height: 100%不是凭空生效的——它必须依赖父元素已经明确设置的高度才能计算出具体值。你现在的代码里，<html>和<body>默认是没有设置高度的，浏览器根本不知道这个100%到底要参照什么来算，所以你的那个容器元素其实并没有真的占满视口高度，只是内容撑开的高度。

那为啥背景色看起来撑满了？这是<body>元素的特殊待遇：哪怕它本身高度不够，背景色也会自动延伸到整个视口，但元素的实际高度还是没到100%视口高度，flex的align-items: center自然没用武之地——容器本身都没那么高，怎么居中？

而100vh就不一样了，它直接绑定视口高度，不管父元素有没有设置高度，都能强制占满整个视口，所以居中能生效，但你说的复用问题确实存在——把这个样式套到嵌套容器里，它就会硬撑满视口，而不是父容器的高度。

给你几个可复用的解决方案 #

要不用100vh还能实现可复用的垂直居中，核心就是让百分比高度能正确计算，同时保持样式的灵活性：

方案1：给根元素补全高度，让容器继承 #

先给<html>和<body>设置明确高度，这样它们的子元素就能基于这个高度计算百分比：

html, body {
  height: 100%;
  margin: 0; /* 去掉默认边距，避免滚动条 */
}

/* 可复用的垂直居中类，随便套在哪都能用 */
.center-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background-color: #cb9800;
}

.content {
  font-family: Comic Sans MS;
  font-size: 75%;
}

对应的HTML：

<body>
  <div class="center-container">
    <div class="content">现在用height:100%也能垂直居中啦！</div>
  </div>
</body>

以后你要在某个嵌套容器里用这个类，只要给那个容器的父元素设置好高度，它就会在父容器范围内居中，完全不依赖视口。

方案2：用flex-grow让容器自动占满空间 #

如果觉得给根元素设高度麻烦，可以让<body>变成flex容器，然后用flex:1让子容器自动占满可用空间：

html, body {
  height: 100%;
  margin: 0;
  display: flex; /* 让body成为flex容器 */
}

.center-container {
  flex: 1; /* 自动吃掉父容器的所有可用空间 */
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #cb9800;
}

.content {
  font-family: Comic Sans MS;
  font-size: 75%;
}

这个方式更灵活，不管你把.center-container放在哪个flex父容器里，它都会自动适配父容器的高度，完美复用。

方案3：用Grid布局（简洁到离谱） #

如果不用兼容老浏览器，Grid布局是最省心的选择，一行代码搞定居中：

html, body {
  height: 100%;
  margin: 0;
}

.center-container {
  display: grid;
  place-items: center; /* 同时实现水平+垂直居中 */
  height: 100%;
  background-color: #cb9800;
}

.content {
  font-family: Comic Sans MS;
  font-size: 75%;
}

同样，只要父元素有明确高度，这个类就能在任何地方复用。

说白了，height:100%搞不定居中就是因为父元素没给明确高度，只要把这个缺口补上，就能摆脱100vh的限制，实现真正可复用的垂直居中布局。

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