Center Vertically A Container With A Column Of Flex Items

Center Vertically A Container With A Column Of Flex Items

Learn to align a column of flex items in the center with Flexbox CSS

Catalin Pit
·Apr 12, 2021·

1 min read

Subscribe to my newsletter and never miss my upcoming articles

Figure 1, below, shows how the application looks before centering the content with Flexbox. What I want to do, is to center the content section of the web page - that is, everything between the header and footer.

ss1.png Figure 1

The second picture, figure 2, illustrates what I want to achieve with Flexboox.

ss2.png Figure 2

The solution

The solution to achieve the result in figure 2 is to use the Flexbox property align-items and set it to center. The code snippet below shows how I solved the issue.

.main {
  display: flex;
  flex-direction: column;
  align-items: center;
}

Below, you can see the full code used for the webpage. The code is from a Vue component, but it's mostly HTML and CSS so it should look somewhat familiar. The only exception is the <CourseCard/>, which might look a bit unfamiliar. Think of it as three different divs wrapped inside .main.

<template>
  <div class="main">
    <h1>Courses</h1>

    <div class="courses">
      <CourseCard
        v-for="(course, index) in courses"
        :key="index"
        :course="course"
        :data-index="index"
      />
    </div>
  </div>
</template>

<style>
.main {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 50px 0px;
}

.courses {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: row;
  grid-gap: 10px;
  justify-items: center;
}
</style>
 
Share this