title: Centering flexbox on page with absolute positioning
body: <p>I am having a lot of trouble centering. So basically I want my container div in the dead center of the page. I tried having a wrapper div relative positioning and making my container div absolute positioning with <code>top:50%</code> and <code>left:50%</code>,  but now the whole right column (my third column) is missing, and my second column's text has flown outside of the container div. At this point it just seems like everything I'm doing is counter-intuitive to what I had expected..I tried taking off <code>margin: auto</code> but that just made the problem worse. In the picture my container div is near the bottom of the screen and I don't know why. But my ultimate goal is to center it dead center in the page and be able to put percentage height and width on it.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>*{
   margin: 0;
  
   }
  
  html, body{
   height: 100%;
   }
  
  
  #bigwrap{
   position: relative;
   height: calc(100vh - 150px);
   width: 100%;
  }
  
  .container {
   display:flex;
   position: absolute;
   flex-wrap:wrap;
   flex-direction:row;
   justify-content:flex-start;
   align-items:center;
   width: 80%;
   top: 50%;
   left: 50%;
   margin-left:  40%;
   height: 70%;
  }
  
  .container img{
   width: 50px;
   height: 50px;
  }
  
  .left {
   display: flex;
   flex-flow: row wrap;
   align-items: flex-start;
   justify-content: center;
   order:1; 
   background:red;
   flex-basis:100%;
   height:100%;
    }
  
  
    .left img{
   max-width: 100%;
    }
  
  
  .middle {
   display:flex;
   flex-flow: row wrap;
   align-content: flex-start;
   justify-content: flex-start;
   order:3;
   background:green;
   flex-basis: 100%;
   height:100%;
   }
  .right {
   order:2; 
   background:yellow;
   flex-basis:100%; 
   height:100%;
  }
  
  .box{
   display: flex;
   flex-flow: row wrap;
   align-items: flex-start;
   justify-content: flex-start;
   height: 200px;
   width: 200px;
  }
  
  
  
  
  @media screen and (min-width:600px) {
     .container {
         flex-wrap:nowrap;
     } 
  
      .left {
          flex-basis:1;
          order:1;
      }
      .middle {
          flex-basis:1;
          order:2;
      }
      .right {
          flex-basis:1;
          order:3;
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="bigwrap"&gt;
         &lt;div class="container"&gt;
          &lt;div class="left"&gt;
              &lt;img src="cat1.jpeg" alt="cat"&gt;
              &lt;img src="cat1.jpeg" alt="cat"&gt;
             
          &lt;/div&gt;
          &lt;div class="middle"&gt;
              &lt;div class="box"&gt;`
                 &lt;p&gt;texteiehiefief texteiehiefief texteiehiefief texteiehiefief &lt;/p&gt;
  
  
              &lt;/div&gt;
  
                &lt;div class="box"&gt;`
                 &lt;p&gt;texteiehiefief texteiehiefief texteiehiefief texteiehiefief &lt;/p&gt;
  
  
              &lt;/div&gt;
  
          &lt;/div&gt;
  
          &lt;div class="right"&gt;
              
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/jjweT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jjweT.png" alt="enter image description here"></a></p>