为何设置body为display:flex后，div元素仍未垂直居中？

核心原理：flex居中依赖容器的可用空间 #

flex布局的align-items（垂直方向对齐）和justify-content（水平方向对齐）属性，只有当flex容器本身存在多余的可用空间时，才能发挥作用——它们本质是在容器的剩余空间里调整子元素的位置。

具体分析你的代码情况 #

未添加height:100vh时的问题

body是块级元素，默认高度为auto，也就是高度完全由内部的.profile-card内容撑开，此时body的高度和.profile-card的高度完全一致：

• 垂直方向：容器（body）没有多余空间，align-items:center没有可操作的空间，所以子元素不会垂直居中；
• 水平方向：body默认宽度是100%（占满视口宽度），justify-content:center其实是生效的，但因为垂直方向没居中，你会觉得整个div没有居中。

对应的初始代码：

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

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

.profile-card {
    background-color: orange;
    width: 500px;
}

<body>
    <div class="profile-card">
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laboriosam animi officia rem nemo, ullam excepturi quo incidunt quibusdam dolores blanditiis.</p>
    </div>
</body>

添加height:100vh后的变化

height:100vh将body的高度设置为当前浏览器视口的100%高度，此时body作为flex容器：

• 垂直方向拥有了和视口一样高的可用空间，align-items:center可以把.profile-card在这个垂直空间里居中；
• 水平方向原本就有100%的宽度空间，配合justify-content:center，最终实现了子元素在页面正中央的效果。

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