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

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容器的后代不参与flex布局,并将忽略flex属性.

在您的布局中,.box元素是flex容器(父元素),div元素是flex项(子元素).因此,justify-content,align-content和align-items规则适用于div的.

但是,文本是另一个级别.它超出了这个flex容器的范围.该文本被视为Flex容器的flex项目/ grand子项的子元素.因此,文本无法接受flex属性.

在CSS中,未由元素显式包装的文本由内联框在算法上包装.这使它成为父内容的匿名内联元素和子元素.

从CSS规范:

9.2.2.1匿名内联框

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

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

4. Flex项目

Flex容器的每个in-flow子项都变为flex项,并且直接包含在flex容器内的每个连续文本行都包含在匿名flex项中.

因此,文本是flex项的子元素.

所以你需要做的就是将flex项目变成一个flex容器.然后,您可以重复居中规则以垂直和/或水平居中文本.