Flex对齐项目中心无法正常工作

Question

Flexbox align-items: center;无效。 Codepen链接如下。

https://codepen.io/halitguvenilir/pen/zRxYVB

如果你帮忙我会很高兴的。

修改

原笔：

.container {
  display: flex;
  justify-content: center;
  align-self: center;
}

<div class="container">
  <p>Lorem ipsum</p>
</div>

Answer 1

在给定的链接中，使用align-self属性而不是align-items。 如果您保留align-items并将高度应用于容器，则可以看到它正常工作。 Pen

Answer 2

如果你使用正确的属性并给container一个高度，它将起作用......

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

<div class="container">
  <p>Lorem ipsum</p>
</div>