如何在柔性盒内垂直对齐文本？

Question

如何在柔性盒内垂直对齐文本？我想使用Flex框垂直对齐<li>但没有取得很大的成功。我已经在线检查过了，很多教程实际上使用了包装div，它获得了align-items:center但是我想知道是否有可能删除这个额外的元素？我选择在这个实例中使用FLEX框，因为列表项的高度将是动态%。* {  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>

Answer 1

如果你做了flex-direction垂直(使用)column)然后justify-content: center垂直中心。然后你就可以用text-align: center也要水平地居中。

li {
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;}

这是一个代码演示.

Answer 2

对于未来的谷歌人来说，

投票最多的答案，也是第二大的答案，都是为了解决问题。这个具体问题由OP发布，内容(文本)被包装在内联块元素中，内容(文本)是“算法级的”。但是，你的案子可能是关于在容器内垂直对齐法线元素，这也适用于我的情况，因此您所需要的就是

align-self: center;

只需在这里列出这一点，因为这是上述查询的最高结果，而且我也相当困惑了很长一段时间*德普 *