How to center text vertically in a flex element?

Question

I just need the text:

display: table-cell;
vertical-align: middle;

But the use of flexible boxes

div {
  border: 1px solid black;
}

.box {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-content: center;
  align-items: stretch;
  height: 200px;
}

.box div {
  order: 1;
  flex: 0 1 auto;
  align-self: auto;
  min-width: 0;
  min-height: auto;
}

.box div.C {
  flex: 1 1 auto;
}

<div class="box">
  <div class="A">A</div>
  <div class="B">B</div>
  <div class="C">C</div>
  <div class="D">D</div>
  <div class="E">E</div>
  <div class="F">F</div>
</div>

Run codeHide result

Answer 1

div {
  border: 1px solid black;
}

.box {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-content: center;
  align-items: stretch;
  height: 200px;
}

.box div {
  order: 1;
  flex: 0 1 auto;
  align-self: auto;
  min-width: 0;
  min-height: auto;
  display: flex;            /* NEW */
  align-items: center;      /* NEW */
}

.box div.C {
  flex: 1 1 auto;
}

<div class="box">
  <div class="A">A</div>
  <div class="B">B</div>
  <div class="C">C</div>
  <div class="D">D</div>
  <div class="E">E</div>
  <div class="F">F</div>
</div>

Run codeHide result

---

Description

The scope of the Flex formatting context is limited by parent-child relationships. The descendants of the flexible container outside the children do not participate in the flexible layout and ignore the properties of flexibility.

In your layout, the element .boxis the flex container (parent element), and the div elements are flex elements (children). Therefore, the rules justify-content, align-contentand align-itemsapply to the div.

. . flex/grand child . .

CSS , , . .

CSS:

9.2.2.1 inline

, , .

flexbox .

4. Flex

, , flex .

, flex.

, , , flex flex. / .