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”可以在 flex 容器当前行的横轴上对齐？

新结果^

Answer 1

您的容器可能有 100% 的高度。但是它的父级是否有 100% 的高度？

尝试以下方法：

html, body {
    height: 100%;
}

这将使文档的高度为视口的 100%，以便 .Container 获得文档的 100%。

并且您的两个内部元素（instafeed 和左侧的列）将根据它们的大小进行不同的定位。