flex布局下给body设置align-items:center为何垂直居中不生效

• 百分比高度的计算基准是父元素的明确高度值，你给body设置了height: 100%，但body的上级元素<html>没有设置高度，默认仅由内容撑开高度，此时body的实际高度和内部170px的正方形高度完全一致，align-items: center的垂直居中效果自然无法体现。

有两种常用的修复方式：

方式1：给html元素也设置100%高度 #

修改后的CSS代码如下：

html {
  height: 100%;
}
body {
    display: flex;
    background-color: #333;
    height: 100%;
    margin: 0;
    padding: 0;
    align-items: center;
    justify-content: center;
}

div {
    width: 170px;
    height: 170px;
    background-color: #0073d9;
}

方式2：直接使用视口高度单位 #

不用修改html元素，直接把body的height: 100%改为height: 100vh即可，vh是相对于浏览器视口高度的单位，100vh就等于当前视口的完整高度：

body {
    display: flex;
    background-color: #333;
    height: 100vh; /* 替换原有height: 100% */
    margin: 0;
    padding: 0;
    align-items: center;
    justify-content: center;
}

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