您可以将ul和li显示更改为table和table-cell。然后，垂直对齐将为您工作:

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-items: center代替align-self: center。

不需要改变弯曲方向或使用文本对齐。

下面是你的代码，只做了一个调整，就能让它全部工作:

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, body { 高度:100%; ｝ ul { 高度:100%; ｝ 李{ 显示:flex; justify-content:中心; /* align-self:居中;* / 对齐项目:中心; 背景:银色; 宽度:100%; 高度:20%; ｝ < ul > <li>这是文本</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项目 伸缩容器的每个流中的子元素都成为伸缩项，并且每个子元素 直接包含在伸缩件内的连续文本运行 容器包装在匿名伸缩项中。

因此，li中的文本是一个伸缩项。

* { 填充:0; 保证金:0; ｝ Html, body { 高度:100%; ｝ ul { 高度:100%; ｝ 李{ 显示:flex; justify-content:中心; 对齐项目:中心; 背景:银色; 宽度:100%; 高度:20%; ｝ < ul > <li>这是文本</li> < / ul >

投票最多的答案是解决OP发布的这个特定问题，其中内容(文本)被包装在一个内联块元素中。有些情况下，可能是关于一个正常的元素在容器内垂直居中，这也适用于我的情况下，所以你所需要的是:

align-self: center;

最好的做法是将一个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;
}

结果

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

* { 填充:0; 保证金:0; ｝ 超文本标记语言 身体{ 高度:100%; ｝ ul { 高度:100%; ｝ 李{ 显示:flex; justify-content:中心; 对齐项目:中心; 背景:银色; 宽度:100%; 高度:20%; ｝ < ul > <li>这是文本</li> < / ul >

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

.box { 身高:100 px; 显示:flex; 对齐项目:中心;/*垂直*/ justify-content:中心;/*水平*/ 边框:2px纯黑色; ｝ .box div { 宽度:100 px; 高度:20 px; 边界:1 px固体; ｝ < div class = "盒子" > < div > < / div >你好 世界< p > < / p > < / div >

这取决于你的身高，再叫一件事线高

* { 填充:0; 保证金:0; ｝ 超文本标记语言 身体{ 高度:100%; ｝ ul { 高度:100%; ｝ 李{ 显示:flex; justify-content:中心; align-self:中心; 背景:银色; 宽度:100%; 高度:50 px;行高:50 px; ｝ < ul > <li>这是文本</li> < / ul >

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

li {
  display: flex;

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

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

}

我个人也会以伪元素为目标，并使用边界框 (通用选择器*和伪元素)

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

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

使用align-items将对li中的文本进行对齐。 检查这段代码。它的工作原理。 * { 填充:0; 保证金:0; ｝ 超文本标记语言 身体{ 高度:100%; ｝ ul { 高度:100%; ｝ 李{ 显示:flex; justify-content:中心; 对齐项目:中心; 背景:银色; 宽度:100%; 高度:20%; ｝ < ul > <li>这是文本</li> < / ul >

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

在浏览器的Dev Tools中，你需要检查一个元素，并使用display: flex on，按屏幕截图中显示的图标。

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

.flex-container { display: flex; height: 300px; align-items: center; justify-content: center; width: 100%; } .flex-child { display: flex; width: 100%; background-color: khaki; border: 1px solid #000; align-items: center; justify-content: center; height: 100px; margin: 10px; padding: 10px; } <div class="container flex-container"> <div class="flex-child item-1">English</div> <div class="flex-child item-2"> English</div> <div class="flex-child item-3"> English</div> </div>