Вертикальное центрирование в направлении Flex: столбец

Question

Я пытаюсь расположить элементы по центру с левой стороны моей страницы по вертикали, используя Flexbox, но не смог понять это. Они организованы через flex-direction: column, и я не уверен, как центрировать по горизонтали, когда это установлено. Ниже приведен мой код и живая версия моего сайта. Я разделил два гибких контейнера на правый и левый, чтобы я мог обрабатывать их отдельно Сейчас я имею дело только с левой стороной. Итак, я покажу CSS для этого.

Я пробовал align-items, justify-content и align-self, но они не сработали.

Спасибо , заранее!

Live Сайт: https://huddle-single-landing-page.jordanchude.now.sh/

HTML

<div class="container">
<div class="left-side">
  <img id="huddle" src="https://i.ibb.co/FnJS8vM/logo.png" alt="logo" border="0">
  <img id="illustration" src="https://i.ibb.co/L9HBmDZ/illustration-mockups.png" alt="illustration-mockups" border="0">
</div>
<div class="right-side">
  <p id="headline">Build The Community Your Fans Will Love</p>

  <p id="subtitle">
          Huddle re-imagines the way we build communities. You have a voice, but so does your audience. 
          Create connections with your users as you engage in genuine discussion.
  </p> 

  <button>Register</button>

  <div class="social-icons">
    <span class="fa-stack fa-lg">
        <i class="far fa-circle fa-stack-2x"></i>
        <i class="fab fa-facebook-f fa-1x"></i>
    </span>
    <span class="fa-stack fa-lg">
        <i class="far fa-circle fa-stack-2x"></i>
        <i class="fab fa-twitter fa-1x"></i>
    </span>
    <span class="fa-stack fa-lg">
        <i class="far fa-circle fa-stack-2x"></i>
        <i class="fab fa-instagram fa-1x"></i>
    </span>
  </div>
</div>

CSS

 .container {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;
}

/* Left Side */
.left-side {
    display: flex;
    flex-direction: column; 
    width: 800px;
}

#huddle {
    width: 200px;
    align-self: flex-start; 
}

#illustration {
   width: 100%; 
}

Answer 1

В вашем контейнере нет дополнительной высоты, поэтому нет свободного места для центрирования.

Выполните эту настройку:

.container {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    /* align-items: center */ /* vertically centers both left and right elements */
    flex-wrap: wrap;
    height: 100vh; /* child would inherit height through align-content: stretch default */
}

.left-side {
    display: flex;
    flex-direction: column;
    width: 800px;
    align-self: center; /* vertically centers the flex item */        
    /* justify-content: center; */ /* vertically centers the content of the flex item */
}