在弯曲方向垂直居中：列

Question

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

我尝试过 align-items、justify-content 和 align-self，但这些都不起作用。

提前致谢！

实时网站：https://huddle-single-landing-page.jordanchude.now.sh/

超文本标记语言

<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 {&nbsp; &nbsp; display: flex;&nbsp; &nbsp; flex-direction: row;&nbsp; &nbsp; justify-content: space-around;&nbsp; &nbsp; /* align-items: center */ /* vertically centers both left and right elements */&nbsp; &nbsp; flex-wrap: wrap;&nbsp; &nbsp; height: 100vh; /* child would inherit height through align-content: stretch default */}.left-side {&nbsp; &nbsp; display: flex;&nbsp; &nbsp; flex-direction: column;&nbsp; &nbsp; width: 800px;&nbsp; &nbsp; align-self: center; /* vertically centers the flex item */&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; /* justify-content: center; */ /* vertically centers the content of the flex item */}