[FIXED] How to vertically center text inside flex element

Issue

I have an element, which can contain 1-3 another elements. Let's say it's like this:

<div id="elem1">
   <div class="inner_element">aaaa</div>
   <div class="inner_element">bbbb</div>
</div>

The inner elements have to be positioned in column direction. I need their text to be centered vertically and horizontally.

I have my CSS like this:

#elem1 {
    display: flex;
    flex-direction: column;
}

.inner_element {
    text-align: center;
    flex: 1 100%;
}

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?

Solution

To center the flex items along the main axis (in your case column/vertically), add justify-content: center; to the container (and erase the flex settings from the children):

#elem1 {
  height: 180px;
  border: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.inner_element {
  text-align: center;
}

<div id="elem1">
  <div class="inner_element">aaaa</div>
  <div class="inner_element">bbbb</div>
</div>

Answered By - Johannes

Answer Checked By - Dawn Plyler (PHPFixing Volunteer)