如何在Flexbox中垂直对齐文本？

You could change the ul and li displays to table and table-cell. Then, vertical-align would work for you:

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

而不是使用align-self: centeruse align-items: 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，不同之处在于它适用于flex容器。

由于lis是flex容器，align-items因此可以用于将子元素垂直居中。

* {
  padding: 0;
  margin: 0;
}
html, body {
  height: 100%;
}
ul {
  height: 100%;
}
li {
  display: flex;
  justify-content: center;
  /* align-self: center; */
  align-items: center;
  background: silver;
  width: 100%;
  height: 20%;
}

<ul>
  <li>This is the text</li>
</ul>

Codepen演示

从技术上讲，这里是如何align-items和align-self工作...

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

但是您可以通过调整align-self单个项目的设置来覆盖此默认设置。

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

例

文本是弹性项目吗？

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

<li>This is the text</li>

是的子元素li。

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

从CSS规范：

9.2.2.1匿名内联框

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

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

4.弹性项目

flex容器的每个流入子元素都将成为一个flex项目，而直接包含在flex容器内部的每个连续文本段都被包装在一个匿名flex项目中。

因此，中的文字li是弹性项目。

投票最多的答案是解决由OP发布的特定问题，其中内容（文本）被包装在inline-block元素内。在某些情况下，可能是将普通元素垂直放置在容器内的中心位置，在我的案例中也是如此，因此，您需要做的是：

align-self: center;

结果

的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%; 
}