Search code examples
htmlcssflexboxcenter

Vertically center flex container on page

I am currently trying to vertically center a flex container on a page.

I have a row of 4 circles that I would like to display in the middle of the page. However, the regular method of doing

margin:0;
position:absolute;
top: 50%;

throws away the flex and displays the circles incorrectly. Does anybody know how to make this work with flex?

Here is example code, HTML:

<div class="circles">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>

CSS:

.circles {
  background: red;
  display:flex;
  flex-direction:row;
  width: 500px;
}

.circle {
  width: 124px;
  height: 124px;
  border-radius: 50%;
  background: white;
}

Output: enter image description here

I would like for the red area with the white circles to be displayed in the center of the page. Thanks in advance to those who respond.

Solution

  • What you've missed is the height of the "circles" class. Because without that, the browser can't know where to align them vertically. Below is the snippet code.

    .circles {
  background: red;
  display:flex;justify-content:center;
  width: 100%;
  align-items:center;
  height:100vh;
}

.circle {
  width: 124px;
  height: 124px;
  border-radius: 50%;
  background: white;
}
    <div class="circles">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>

</div>