为何设置display:flex等属性无法让元素垂直水平居中？

当你给body设置display: flex+align-items: center时，垂直居中不生效的核心原因是：body元素默认高度仅由内部内容撑开，没有足够的垂直空间让子元素居中。

具体原因拆解 #

• HTML和body的默认高度行为
  HTML和body元素默认是“包裹内容”的，它们的高度等于内部所有元素的高度总和，不会自动占满浏览器的整个视口高度。如果页面内容很少，body的高度可能只有几十像素，此时align-items: center根本看不出效果——因为容器本身就没有垂直方向的多余空间。

• 百分比高度的依赖关系
  CSS中，height: 100%是基于父元素的高度计算的。body的父元素是html，所以只给body设置height: 100%的话，这个百分比会继承html的默认自适应高度，依然无法撑满视口。必须先让html占满视口高度（html { height: 100%; }），body才能继承这个高度，从而撑满整个视口，此时flex的垂直居中才有空间生效。

两种可行的解决方案 #

方案1：使用百分比高度（需同时设置html和body）

html, body {
  height: 100%;
  margin: 0; /* 清除默认边距，避免滚动条或偏移 */
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

方案2：使用vh单位（无需设置html高度）

vh是相对于视口高度的单位，100vh就是整个浏览器视口的高度。直接给body设置height: 100vh，就能让body撑满视口，不需要依赖html的高度：

body {
  height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

注意事项 #

• 一定要清除body的默认margin，浏览器默认会给body添加8px左右的边距，不清除可能导致页面出现滚动条，或者元素无法完全居中。
• 如果之前尝试100vh没生效，检查是否遗漏了margin: 0，或者是否有其他CSS规则覆盖了body的高度设置。

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