如何在弹性框中垂直对齐文本？

使用 align-items: center 代替 align-self: center。

无需更改 flex-direction 或使用 text-align。

这是您的代码，只需进行一次调整即可使其全部正常工作：

ul {
  height: 100%;
}

li {
  display: flex;
  justify-content: center;
  /* align-self: center;    <---- REMOVE */
  align-items: center;   /* <---- NEW    */
  background: silver;
  width: 100%;
  height: 20%;
}

align-self 属性适用于 弹性项目。除了您的 li 不是弹性项目，因为它的父级 - ul - 没有应用 display: flex 或 display: inline-flex。

因此，ul 不是弹性容器，li 不是弹性项目，align-self 无效。

align-items 属性类似于 align-self，但它适用于 弹性容器。

由于 li 是一个弹性容器，align-items 可用于垂直居中子元素。

{填充：0；边距：0； } html, 身体 { 高度: 100%; } ul { 高度：100%; }李{显示：弹性；证明内容：中心； /* 对齐自我：中心； */ 对齐项目：居中；背景：银色；宽度：100%；高度：20%； }

• 这是正文

codepen demo

从技术上讲，align-items 和 align-self 的工作原理如下...

align-items 属性（在容器上）设置默认值 align-self（在项目上）。因此，align-items: center 表示所有弹性项目都将设置为 align-self: center。

但是您可以通过调整各个项目上的 align-self 来覆盖此默认值。

例如，您可能需要等高的列，因此将容器设置为 align-items: stretch。但是，必须将一项固定在顶部，因此将其设置为 align-self: flex-start。

example

文本如何成为弹性项目？

有些人可能想知道如何运行文本...

<li>This is the text</li>

是 li 的子元素。

原因是没有被内联级元素显式包裹的文本在算法上被内联框包裹。这使其成为匿名内联元素和父级的子级。

从 CSS 规范：

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

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

4. Flex 项 flex 容器的每个流入子项都成为一个 flex 项，并且直接包含在 flex 容器内的每个连续文本运行都包装在一个匿名的 flex 项中。

因此，li 中的文本是一个弹性项目。

---

最好的做法是将一个 flexbox 嵌套在一个 flexbox 中。您所要做的就是给孩子align-items: center。这将垂直对齐其父项内部的文本。

// Assuming a horizontally centered row of items for the parent but it doesn't have to be
.parent {
  align-items: center;
  display: flex;
  justify-content: center;
}

.child {
  display: flex;
  align-items: center;
}

---

投票最多的答案是解决 OP 发布的此特定问题，其中内容（文本）被包装在 inline-block 元素中。某些情况可能是关于在容器内垂直居中正常元素，这也适用于我的情况，因此您只需要：

align-self: center;

---

我不会写答案，因为很多人已经给出了正确的答案。但是，我想向您展示一个有用的工具，可以帮助您避免将来出现此类问题。

在浏览器的开发工具中，您需要检查一个元素并在 display: flex 开启的情况下，按屏幕截图中显示的图标。

https://i.stack.imgur.com/yy5P7.png

然后，您将看到为 display: flex 选择一些属性的选项，这样您就可以轻松快速地检查所有选项，而无需知道您可以使用什么

---

结果

https://i.stack.imgur.com/PqAQA.png

HTML

<ul class="list">
  <li>This is the text</li>
  <li>This is another text</li>
  <li>This is another another text</li>
</ul>

使用 align-items 而不是 align-self，我还将 flex-direction 添加到 column。

CSS

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

.list {
  display: flex;
  justify-content: center;
  flex-direction: column;  /* <--- I added this */
  align-items: center;   /* <--- Change here */
  height: 100px;
  width: 100%;
  background: silver;
}

.list li {  
  background: gold;
  height: 20%; 
}

---

将 li 中的显示设置为 flex 并将 align-items 设置为 center。

li {
  display: flex;

  /* Align items vertically */
  align-items: center;

  /* Align items horizontally */
  justify-content: center;

}

我个人也会针对伪元素并使用 border-box (Universal selector * and pseudo elements)

*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
  

---

使用 display: flex，您可以控制 HTML 元素的垂直对齐方式。

.box { 高度：100px;显示：弯曲；对齐项目：居中； /* 垂直 */ justify-content: center; /* 水平 */ 边框：2px 纯黑色； } .box div { 宽度：100px;高度：20px；边框：1px 实心； }

---

Align-self 不对齐 li 内的项目。相反，它将 li 作为一个整体对齐。

使用 align-items 将显示 li 中的文本。查看此代码。有用。

{填充：0；边距：0； } html, 身体 { 高度: 100%; } ul { 高度：100%; }李{显示：弹性；证明内容：中心；对齐项目：居中；背景：银色；宽度：100%；高度：20%； }

• 这是正文

---

这取决于你的 li 高度只需再叫一件事线高度

{填充：0；边距：0； } html, 身体 { 高度: 100%; } ul { 高度：100%; }李{显示：弹性；证明内容：中心；对齐自我：中心；背景：银色；宽度：100%；高度：50px；行高：50px； }

• 这是正文

---

* {填充：0；边距：0； } html, 身体 { 高度: 100%; } ul { 高度：100%; }李{显示：弹性；证明内容：中心；对齐项目：居中；背景：银色；宽度：100%；高度：20%； }

• 这是正文

---

.flex-container { 显示：弹性；高度：300px；对齐项目：居中；证明内容：中心；宽度：100%； } .flex-child { 显示：弹性；宽度：100%；背景色：卡其色；边框：1px 实心#000；对齐项目：居中；证明内容：中心；高度：100px；边距：10px；填充：10px； }

---

* {填充：0；边距：0； } html, 身体 { 高度: 100%; } ul { 高度：100%; }李{显示：弹性；证明内容：中心；对齐项目：中心；背景：银色；宽度：100%；高度：20%； }

• 这是正文

---

您可以将 ul 和 li 显示更改为 table 和 table-cell。然后，vertical-align 将为您工作：

ul {
    height: 20%;
    width: 100%;
    display: table;
}

li {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    background: silver;
    width: 100%; 
}

http://codepen.io/anon/pen/pckvK

---