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

Question

I have a parent container div and some child elements however only one child element is being vertically centred. I cant figure out what i am doing incorrect. The instagramwrapper is being vertically aligned but the wrapper containing two other child elements remains up the top of the page.

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

It was my understanding that 'align-items' can be aligned in the cross axis of the current line of the flex container?

new result ^

Answer 1

Your container might have height of 100%. But does it's parent have a height of 100%?

try the following:

html, body {
    height: 100%;
}

This will give the document a height of 100% of the viewport, so that the .Container gets 100% of the document.

And both of your inner Elements (instafeed and the column on the left) will be positioned differently, depending on their size.