在 flex-direction: column 垂直居中

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

您的容器中没有额外的高度，因此没有免费的 space 用于居中。

进行此调整：

.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 */
}

在 flex-direction: column 垂直居中

Vertically centering in flex-direction: column

html

css

centering

flexbox