如何在 flex 元素中垂直居中文本？

Question

如何在 flex 元素中垂直居中文本？

7

I just want the text to be like:

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

但是使用弹性盒子（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>

- Vitim.us

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michael Benjamin · Accepted Answer

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的范围仅限于父子关系。弹性容器（parent）的后代不参与弹性布局，将忽略弹性属性。

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

然而，文本在另一个层次。它超出了这个弹性容器的范围。该文本被认为是弹性项的子元素/弹性容器的子孙元素。因此，文本无法接受弹性属性。

在CSS中，没有明确包装在元素中的文本会通过算法包装成内联框。这使其成为父元素的匿名内联元素的子元素。

来自CSS规范:

9.2.2.1 匿名内联框

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

弹性盒规范提供了类似的行为。

4. 弹性项

弹性容器的每个流动子元素都变成一个弹性项，直接包含在弹性容器内的连续文本运行将被包装在一个匿名弹性项中。

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

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