How to vertically center text inside flex element

Question

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?

If you meant that the `.inner_element` should share their parent's height equal, and their text should align centered, do like this: https://jsfiddle.net/apuaov5g/5/ — Asons, Feb 15 '18 at 08:16

score 0 · Answer 1 · answered Feb 14 '18 at 22:23

0

You would have to give your wrapper a fixed height so the inner elements calculate the center with reference to that.

answered Feb 14 '18 at 22:23

code-orange

129
6

Johannes · Accepted Answer · 2018-02-14T23:38:09.260

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>

How to vertically center text inside flex element

2 Answers2