html - 使用 flex 显示的容器拉伸(stretch)

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-direction 更改为 row，但这只会拉伸(stretch)它以占据所有水平空间。

这是一个代码笔: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;
}