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

Question

我正在尝试构建一个水平和垂直对齐的滑块。我在此代码中使用 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>

Answer 2

不要 body 弯曲。改用容器：

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  /*or use height:100vh;*/
}



<div class="container">
    <div id="slider">

      the content

    </div>
  </div>

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

How can I vertically align a div without giving the height of the screen?

html

css

positioning

flexbox