在弯曲方向垂直居中：列

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 {

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

}