Is there a way to vertically-center text in this Flexbox case without nesting flexboxes?

Question

I'm playing around with flex-direction:column to understand this property better. Here's a Codepen of my code and a snippet below :

.container {
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:center;
  max-width: 800px;
  height: 500px;
  border: 1px solid black;
}

div div
{
  text-align:center;
  padding:30px 30px;
  width:20%;
  flex:1;
}

.red { background-color:red; }
.orange { background-color:orange; }
.yellow { background-color:yellow; }
.green { background-color:green; }
.blue { background-color:blue; }

<div class="container">
  <div class="red">RED</div>
  <div class="orange">ORANGE</div>
  <div class="yellow">YELLOW</div>
  <div class="green">GREEN</div>
  <div class="blue">BLUE</div>
</div>

Notice the text in the colored boxes are not vertically aligned. What causes this, and is there a way to align them vertically without nesting flexboxes within flexboxes?

I'd personally make `div div` a `flex` container, but if you really want to avoid nesting flexboxes, you could give it a fixed height and use the same value as `line-height` as a workaround. — Bumhan Yu, May 17 '22 at 15:50

Youssouf Oumar · Answer 1 · 2022-05-23T19:24:43.710

By removing flex:1; on that div div, you get what (I think) you want.

Setting flex:1 means every box would take 1/5 of the parent's height. And since you have this fixed height on the parent, boxes are taking an height that is bigger than what is normally made with their content and padding.

Or you you could remove that height: 500px; from the parent, and keep everything as it is, like so:

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  max-width: 800px;
  border: 1px solid black;
}

div div {
  padding: 30px 30px;
  width: 20%;
  text-align: center;
  flex:1;
}

.red {
  background-color: red;
}
.orange {
  background-color: orange;
}
.yellow {
  background-color: yellow;
}
.green {
  background-color: green;
}
.blue {
  background-color: blue;
}

<div class="container">
  <div class="red">RED</div>
  <div class="orange">ORANGE</div>
  <div class="yellow">YELLOW</div>
  <div class="green">GREEN</div>
  <div class="blue">BLUE</div>
</div>

Hi @Xeon, did you check this answer? – Youssouf Oumar Aug 08 '22 at 05:25 — Youssouf Oumar, Aug 08 '22 at 05:25

Ibrahim Nergiz · Answer 2 · 2022-05-17T15:49:36.247

Actually the reason the boxes look like that is: padding

To center text and content both horizontally and vertically in flex logic, you can add justify-content and align-items to the boxes.

div div {
  display: flex;
  justify-content: center;
  align-items: center;
}

For your question:

.container {
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:center;
  max-width: 800px;
  height: 500px;
  border: 1px solid black;
}

div div
{
  width:20%;
  flex:1;
  
  display: flex;
  justify-content: center;
  align-items: center;
}

.red { background-color:red; }
.orange { background-color:orange; }
.yellow { background-color:yellow; }
.green { background-color:green; }
.blue { background-color:blue; }

<div class="container">
  <div class="red">RED</div>
  <div class="orange">ORANGE</div>
  <div class="yellow">YELLOW</div>
  <div class="green">GREEN</div>
  <div class="blue">BLUE</div>
</div>

While I agree with this solution, OP specifically mentioned _not nesting flex containers_. — Bumhan Yu, May 17 '22 at 15:48

score 0 · Answer 3 · answered May 17 '22 at 15:58

Since you asked to not use flexbox a possible approach is to use display: grid along with place-content: center

.container {
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:center;
  max-width: 800px;
  height: 500px;
  border: 1px solid black;
}

div div
{
  text-align:center;
  padding: 30px;
  width:20%;
  flex: 1;
  display: grid;
  place-content: center;
}

.red { background-color:red; }
.orange { background-color:orange; }
.yellow { background-color:yellow; }
.green { background-color:green; }
.blue { background-color:blue; }

<div class="container">
  <div class="red">RED</div>
  <div class="orange">ORANGE</div>
  <div class="yellow">YELLOW</div>
  <div class="green">GREEN</div>
  <div class="blue">BLUE</div>
</div>

and, as specified from other users, the position of the text in your example depends on the padding-top you set, as you can see from a web inspector

score 0 · Answer 4 · answered May 17 '22 at 16:18

Here you can find a bunch of ways to vertically center text: How do I vertically align text in a div?

And this answer to the previous question tells you how to do it without flex, nor position absolute, just using line-height: https://stackoverflow.com/a/4915529/11569755

That's useful when you know the height of your child div's, like in your example.

So you could add:

line-height: 40px;

to your div's, that would make it.

The number 40 comes from the height of the parent div (500px). As it has 5 children with the same flex properties, each one is 100px high, minus 60px of vertical padding (30px top, 30px bottom), that makes 40px.

You could also remove the padding and set the line-height to 100px.

If in a real case you won't know the height of the element, you should use one of the other approaches.

Is there a way to vertically-center text in this Flexbox case without nesting flexboxes?

4 Answers4