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:

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.

Contents hide

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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>

Method 2

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>

Method 3

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>

Method 4

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>

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes

Article Rating