title: How to vertically center text inside flex element
body: <p>I have an element, which can contain 1-3 another elements. Let's say it's like this:</p>
  
  <pre><code>&lt;div id="elem1"&gt;
     &lt;div class="inner_element"&gt;aaaa&lt;/div&gt;
     &lt;div class="inner_element"&gt;bbbb&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The inner elements have to be positioned in column direction. I need their text to be centered vertically and horizontally.</p>
  
  <p>I have my CSS like this:</p>
  
  <pre><code>#elem1 {
      display: flex;
      flex-direction: column;
  }
  
  .inner_element {
      text-align: center;
      flex: 1 100%;
  }
  </code></pre>
  
  <p>The text is aligned horizontally, but I cannot find any combination of flex attributes, which will align the text vertically as well. Please, can anybody advice, how to center the text inside the inner elements vertically?</p>