为什么CSS中设置html标签高度后flexbox才能垂直居中div容器

原理说明 #

CSS中设置height: 100%的百分比取值，是相对于元素的父元素已确定的高度计算的：如果父元素没有显式设置高度值，子元素的百分比高度会直接失效，自动回退为height: auto，也就是高度由内部内容撑开。

对应你的代码场景，元素层级是：.container → <body> → <html> → 浏览器视口，逻辑链路如下：

• 你的.container设置了height: 100%，需要父元素<body>有明确高度才能正常计算
• <body>如果单独设置height: 100%，它的父元素<html>默认高度是auto，没有明确高度值，所以<body>的100%高度会失效，高度由内部内容撑开
• 只有先给<html>设置height: 100%，<html>才会继承浏览器视口的高度，占满整个屏幕，此时<body>的100%高度才有参考值，也占满整个屏幕，后续.container的100%高度才能正常生效，flex的垂直居中逻辑才会在整个屏幕高度范围内生效。

如果不想设置<html>的高度，也可以直接用视口高度单位vh实现，不需要依赖父元素高度继承：

body {
  background-image: url("images/pattern-background-desktop.svg");
  background-color:  #E0E8FF;
  min-height: 100vh; /* 直接取视口100%高度，不需要设置html高度 */
  margin: 0;
}

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