Проблемы с вертикальным центром в 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;
}