如何在弹性项目中垂直居中文本？

Question

I just want the text to be like:

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

But using flex 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> 

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> 

---

Explanation

The scope of a flex formatting context is limited to a parent-child relationship. Descendants of a flex container beyond the children do not participate in flex layout and will ignore flex properties.

In your layout, the .box element is the flex container (the parent) and the div elements are the flex items (the children). Therefore, the justify-content , align-content and align-items rules apply to the divs.

However, the text is another level down. It falls outside the scope of this flex container. The text is considered a child element of the flex items / grand child of the flex container. As a result, the text cannot accept flex properties.

In CSS, text that is not explicitly wrapped by an element is algorithmically wrapped by an inline box. This makes it an anonymous inline element and child of the parent.

From the CSS spec:

9.2.2.1 Anonymous inline boxes

Any text that is directly contained inside a block container element must be treated as an anonymous inline element.

The flexbox specification provides for similar behavior.

4. Flex Items

Each in-flow child of a flex container becomes a flex item, and each contiguous run of text that is directly contained inside a flex container is wrapped in an anonymous flex item.

Therefore, the text are child elements of the flex items.

So all you need to do is make the flex item into a flex container. You can then repeat the centering rules to vertically and/or horizontally center the text.