Benedikt Winckler Benedikt Winckler - 1 month ago 5
CSS Question

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

I am trying to build a slider which is aligned horizontally and vertically.
I am using

display: flex;
in this code:



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

<div id="slider">

the content

</div>





I want the div to be in the center of the screen but without giving the body a certain height this doesn't seem to work for me. Do I have to use
height: 100vh;
or is there a much better solution?

Answer

You need to set height: 100% on html also.

html {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}
<div id="slider">
  the content
</div>

Comments