Flexbox 不会垂直居中父元素的子元素

Question

我有一个父容器 div 和一些子元素，但是只有一个子元素垂直居中。我不知道我做错了什么。instagramwrapper 垂直对齐，但包含其他两个子元素的包装器仍然位于页面顶部。

html:

<div class="Container">

<div class="headerWrapper">

   <div> 

       <span>Information & Advice</span>

    </div>

    <div>

       <span>From the daylight experts</span> 

    </div>    

</div>

<div class="wrapper">

    <app-carousel></app-carousel>

    <app-guides></app-guides>

</div> 

<div class="instagramWrapper">

    <app-instagram></app-instagram>

</div>       

CSS：

  .Container {

    padding: 0;

    height: 100%;

    margin: 0;

    display: flex;

    align-self: center;

    align-items: center;

    justify-content: center;     

    flex-direction: row;

    width: 100%;

  }

  .wrapper {

    width: 780px;

    /* inherit parent width */

  }

  .instagramWrapper {

    width: 500px;

    padding-left: 10px;

    margin-left: 2px;

    /* inherit parent width */

  }

据我了解，“align-items”可以在弹性容器当前行的横轴上对齐？

Answer 1

您的容器的高度可能为 100%。但它的父级的高度是 100% 吗？尝试以下操作：html,&nbsp;body&nbsp;{&nbsp; &nbsp;&nbsp;&nbsp;height:&nbsp;100%; }这将使文档的高度为视口的 100%，以便 .Container 获得文档的 100%。您的两个内部元素（instafeed 和左侧的列）的位置将有所不同，具体取决于它们的大小。