html - 如何在不给出屏幕高度的情况下垂直对齐 div？

Question

我正在尝试构建一个水平和垂直对齐的 slider 。 我在这段代码中使用 display: flex;:

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}

<div id="slider">

  the content

</div>

我希望 div 位于屏幕中央，但如果不给 body 一定的高度，这似乎对我不起作用。我必须使用 height: 100vh; 还是有更好的解决方案？

Answer 1

您还需要在 html 上设置 height: 100%。

html {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}

<div id="slider">
  the content
</div>