为何添加height: calc(100vh - 1px)后Flex布局的body子元素才垂直居中？

核心问题：flex容器的高度默认由内容决定 #

默认状态下，body元素的高度是自适应内部内容的——它的高度等于所有子元素的总高度，不会自动填充整个浏览器视口。

当你只设置以下代码时：

body {
    background-color: hsl(212, 45%, 89%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

justify-content: center确实会让子元素在body的垂直范围内居中，但此时body本身和子元素高度一致，视觉上完全看不出居中效果，也就是你最初遇到的情况。

添加高度属性后生效的原因 #

当你给body设置height: calc(100vh - 1px)时，相当于强制把body的高度拉伸到接近整个视口高度（100vh是当前浏览器视口的高度值，减1px是为了避免默认边距导致的滚动条）。此时body作为flex容器拥有了足够的垂直空间，justify-content: center就能把子元素在完整的视口高度范围内垂直居中，达到你想要的效果。

更稳妥的写法 #

建议先重置html和body的默认边距，再用min-height替代固定height，这样内容超出视口时body会自动扩展，不会出现内容截断：

html, body {
    margin: 0;
    padding: 0;
}
body {
    background-color: hsl(212, 45%, 89%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

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