使用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可用于垂直居中子元素。 * { 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> 从CSS规范： 9.2.2.1匿名内联框 任何直接包含在块容器元素中的文本都必须被视为匿名内联元素。 Flexbox规范提供了类似的行为。 4.灵活的项目 Flex容器的每个流入子代都成为一个Flex项目，并且每个连续运行的文本都直接包含在Flex容器中，并被包装在一个匿名Flex项目中。 因此，该文本li是一个弹性项目。... 展开详请