关于flexbox中垂直中心的问题

Question

我认为这是一个愚蠢的错误，但我不明白。

.box {
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="box">
  <div><img src="https://via.placeholder.com/150x150" alt=""></div>
</div>

但我的形象并不居中。

我看MDN，图像居中

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container

我的页面 ：

Answer 1

如果这是您的所有代码，您忘记了CSS：

.box div {
  width: 100px;
  height: 100px;
}

此外，尝试添加其他人建议的最大垂直高度。

height: 100vh;

Answer 2

我认为增加高度将解决您的问题。

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