Question

我正在尝试构建一个水平和垂直对齐的滑块。我在此代码中使用display: flex;：

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

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

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

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

不要让身体弯曲。改为使用容器：

.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？

2 个答案: