垂直于弯曲方向居中：列

Question

我正在尝试使用Flexbox在页面左侧垂直居中放置元素，但无法弄清楚。它们是通过flex-direction: column进行组织的，设置此设置后，我不确定如何水平居中。到目前为止，我的代码和网站的实时版本请参见下文。我将两个flex容器分为左右两边，以便分别处理和居中。我现在只处理左侧。因此，我将首先显示该CSS。

我尝试过align-items，justify-content和align-self，但没有用。

谢谢，提前！

实时网站：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 */
}