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

Question

我只希望文本是这样的：

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

但是使用弹性盒子

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>

---

说明

flex formatting context 的范围仅限于父子关系。子元素之外的 flex 容器的后代不参与 flex 布局，并且会忽略 flex 属性。

在您的布局中，.box 元素是弹性容器（父级），而 div 元素是弹性项目（子级）。因此，justify-content、align-content 和 align-items 规则适用于 div。

但是，文本又低了一层。它超出了这个弹性容器的范围。文本被认为是弹性项目的子元素/弹性容器的大子元素。因此，文本不能接受 flex 属性。

在 CSS 中，未被元素显式包裹的文本在算法上由内联框包裹。这使它成为 匿名内联元素 和父级的子级。

来自 CSS 规范：

9.2.2.1 Anonymous inline boxes

任何直接包含在块容器元素中的文本都必须被视为匿名内联元素。

flexbox 规范提供了类似的行为。

4. Flex Items

flex 容器的每个流入子元素都成为一个 flex 项，并且每个连续的文本都直接包含在 flex 中 容器被包裹在一个匿名的弹性项目中。

因此，文本是弹性项目的子元素。

所以你需要做的就是把弹性项目变成弹性容器。然后，您可以重复居中规则以垂直和/或水平居中文本。