Растяжение контейнера с гибким дисплеем

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;
}

Это приводит к тому, что окно моего профиля становится center-выровнен, но я также хочу, чтобы он был выровнен по вертикали.Я попытался изменить flex-направление на строку, но это только растягивает его, чтобы охватить все горизонтальное пространство.

Вот кодовая ручка: 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;
}