Vertically center flex container on page

Question

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:

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.

Did any of the answers solve your problem? – MarioG8 Dec 22 '21 at 13:18 — MarioG8, Dec 22 '21 at 13:18
@MarioG8 Yeah, the answer I marked as correct helped me out – Pimv_h Jan 12 '22 at 13:17 — Pimv_h, Jan 12 '22 at 13:17

score 4 · Accepted Answer · answered Nov 04 '21 at 12:13

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>

score 0 · Answer 2 · answered Nov 04 '21 at 12:13

Wrap your content inside a div and apply display:flex to it, then give this div the entire viewport height and align it's content to center.

(in case that you want to keep the red background behind the circles only not the entire page)

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

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

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

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

score 0 · Answer 3 · answered Nov 04 '21 at 12:23

You Can simple add body selector as main container and use flexbox properties with align-items: center; to center vertically and justify-content: center; to center horizontally, remembering about the height: 100vh property.

body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.circles {
  background: red;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  width: 500px;
}

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

score 0 · Answer 4 · answered Nov 04 '21 at 12:37

You can set the margin property to auto to horizontally center the element within its container.

Give circles' container, a height and display: flex; and the margin will vertically center too.

.container {
  height: 100vh;
  display: flex;
}

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

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

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

Vertically center flex container on page

4 Answers4