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

我想使用flexbox在a内垂直对齐某些内容，<li>但没有取得很大的成功。

我已经在网上检查过，许多教程实际上都使用了包装器div，该包装器是align-items:center从父级的flex设置获取的，但是我想知道是否有可能切掉这个额外的元素？

我选择在这种情况下使用flexbox，因为列表项的高度是动态的%。

* {
  padding: 0;
  margin: 0;
}

html,
body {
  height: 100%;
}

ul {
  height: 100%;
}

li {
  display: flex;
  justify-content: center;
  align-self: center;
  background: silver;
  width: 100%;
  height: 20%;
}

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

而不是使用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;

最好的方法是将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%; 
}

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

.box {
  height: 100px;
  display: flex;
  align-items: center; /* Vertical */
  justify-content: center; /* Horizontal */
  border:2px solid black;
}

.box div {
  width: 100px;
  height: 20px;
  border:1px solid;
}

<div class="box">
  <div>Hello</div>
  <p>World</p>
</div>

您可以将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