带有柔性显示的容器拉伸

Question

我的HTML文件中有以下内容：

<div class="container-box">
    <div class="profile-box">
        <div class="image-container">
            <div class="profile-picture"></div>
        </div>
    </div>
</div>

在我的CSS文件中，我有以下内容：

.container-box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.profile-box {
  height: 350px;
  width: 500px;
  background-color: white;
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

这会导致我的个人资料框中心对齐，但我也希望它垂直对齐。我已经尝试将flex方向更改为row，但只是将其拉伸以接管所有水平空间。

这是一个codepen：https://codepen.io/Humad/pen/rKLMeo

Answer 1

它已经居中，但您的body和.container-box没有为其设置高度。

JSFiddle demo

body, html {
  height: 100%; /* added */
  width: 100%; /* added */
  margin: 0; /* added */
}

.container-box {
  height: 100%; /* added */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: black;
}