如何在Flexbox中垂直alignment文本？
我想使用弹性框来垂直alignment<li>某些内容，但是没有成功。
我在网上查了一下，许多教程实际上使用了一个包装div，它从父级的flex设置中获取align-items:center ，但是我想知道是否可以删除这个额外的元素？
我select在这个实例中使用弹性框，因为列表项高度将是一个dynamic％。
* { 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>
编辑：请参阅Michael_B的答案，以获得更优雅，更灵活的解决scheme。
如果您使flex-direction垂直（使用column ）然后justify-content: center垂直居中。 然后你可以使用text-align: center来水平居中。
li { display: flex; justify-content: center; flex-direction: column; text-align: center; }
这是在行动： http : //codepen.io/anon/pen/Fkhgo
而不是使用align-self: center use align-items: center 。
没有必要改变flex-direction或使用text-align （如另一个答案中所build议的）。
以下是您的代码，只需进行一次调整即可完成所有工作：
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属性适用于flex项目 。 除了你的li不是flex项目，因为它的父 – ul – 没有display: flex或display: inline-flex应用。
因此， ul不是flex容器， li不是flex项目， align-self不起作用。
align-items属性类似于align-self ，除了它适用于flex容器 。
由于li是一个弹性容器，因此可以使用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>
您可以将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%; }
