title: Bars inside mobile menu button do not appear in vertical center
body: <p>With the code below I created a mobile menu button <code>.container</code> inside my <code>.navigation</code>. All this works fine so far.</p>
  
  <p>However, I want that the <code>.bars</code> inside the mobile menu button to be vertically centered. I tried to go with <code>vertical-align: center;</code> but could not make it work.</p>
  
  <p>What do I have to change in my code so the <code>.bars</code> in the mobile menu button <code>.container</code> get vertically centered?</p>
  
  <p>You can also find my code <a href="https://jsfiddle.net/p6dqLLj6/16/" rel="nofollow noreferrer">here</a></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>body {
    margin: 0;
  }
  
  .header {
    width: 80%;
    height: 30%;
    margin-left: 10%;
    display: flex;
    justify-content: space-between;
    position: fixed;
    top: 0;
    box-sizing: border-box;
    border-style: solid;
    border-width: 1px;
    background-color: yellow;
  }
  
  .image {
    width: 30%;
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
    box-sizing: border-box;
    border-style: solid;
    border-width: 1px;
    background-color: green;
  }
  
  .navigation {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border-style: solid;
    border-width: 1px;
  }
  
  .container {
   height: 100%;
   width: 20%;
   cursor: pointer;
   float: right;
   box-sizing: border-box;
   border-style: solid;
   border-width: 1px;
   background-color: fuchsia;
  }
  
  .bars {
   height: 100%;
   width: 100%;
   vertical-align: center;
  }
  
  .bar1, .bar2, .bar3 {
   height: 10%;
   width: 100%;
   background-color: #333;
   margin-top: 8%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="header"&gt; 
  
   &lt;div class="image"&gt;
   Image
    &lt;/div&gt;
    
    &lt;nav class="navigation"&gt; 
    
      &lt;div class="container"&gt;
        &lt;div class="bars"&gt;
          &lt;div class="bar1"&gt;&lt;/div&gt;
          &lt;div class="bar2"&gt;&lt;/div&gt;
          &lt;div class="bar3"&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt; 
      
    &lt;/nav&gt;
    
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>