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.

Figure 1

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

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.

COPY

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

#flexbox #css #flexbox container