How to Center Items Horizontally and Vertically with Flexbox in CSS

By the end of this page, you will understand how Flexbox aligns items on the main axis and cross axis, how to stack items vertically with flex-direction: column, and how to center content horizontally and vertically inside a container.

Flexbox is a CSS layout system designed to align and distribute space between elements inside a container.

The most important idea in Flexbox is that alignment depends on direction:

• The main axis is controlled by flex-direction
• The cross axis is perpendicular to the main axis

For example:

• If flex-direction: row, items go left to right
  • justify-content aligns items horizontally
  • align-items aligns items vertically
• If flex-direction: column, items go top to bottom
  • justify-content aligns items vertically
  • align-items aligns items horizontally

This matters because many centering problems come from using the right property on the wrong axis.

In your case, the goal is:

• place items one below another
• center them horizontally
• optionally center the whole group vertically inside the container

That means the container should usually use:

display: flex;
flex-direction: column;
align-items: center;
: center;

Think of a Flexbox container like a line of people standing in a room.

• flex-direction decides whether they stand in a row or a column
• justify-content decides how they are placed along the direction they are facing
• align-items decides how they are placed sideways

If the people stand in a column:

• justify-content: center moves the whole group up or down in the room
• align-items: center moves each person left or right so they are centered

So for stacked numbers, imagine lining them up vertically, then sliding the whole stack into the middle of the room.

The core Flexbox syntax for centering stacked items looks like this:

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

Example: stack items vertically and center them

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  : ;
}

 {
  : ;
  : ;
  : ;
  : tomato;
  : white;
  : flex;
  : center;
  : center;
  : ;
  : bold;
}

Consider this example:

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
</div>

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 400px;
}

.box {
  width: 100px;
  height: 100px;
}

What happens step by step

1. display: flex makes .container a flex container.
2. flex-direction: column changes the main axis from horizontal to vertical.
3. The two .box elements are now placed one below the other.

Flexbox centering is used constantly in real interfaces.

Common examples

• Login screens
  • Center a form both horizontally and vertically on the page
• Empty states
  • Center a message like “No data available” in a dashboard panel
• Card layouts
  • Center text and icons inside fixed-size cards
• Loading screens
  • Center a spinner in the viewport
• Navigation and toolbars
  • Align buttons and labels evenly inside a header or sidebar
• Modal dialogs
  • Place the dialog in the center of the screen

In your case

A vertical list of centered boxes is similar to:

• quiz answer cards
• menu options
• onboarding steps
• dashboard action tiles

In real projects, developers often use Flexbox centering in a few common patterns.

1. Full-page centering

.page {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

Used for login pages, error pages, and splash screens.

2. Vertical stack with centered children

.list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

Used for button groups, option lists, and wizard steps.

3. Centering inside a component

.card {
  display: flex;
  align-items: center;
  justify-content: center;
}

Used to center text, icons, or badges inside cards and panels.

4. Guarding layout with explicit height

Developers often add one of these when vertical centering is needed:

• height: 100vh
• min-height: 100vh

1. Forgetting flex-direction: column

Broken example:

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

This centers items, but they stay in a row by default.

Fix:

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

2. Using the wrong alignment property for the axis

Beginners often think:

• justify-content always means horizontal
• align-items always means vertical

That is not true. It depends on flex-direction.

3. Expecting vertical centering without container height

Broken example:

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

Flexbox row vs column

/* Stack items vertically */
.container {
  display: flex;
  flex-direction: column;
}

/* Center horizontally when using column */
.container {
  align-items: center;
}

/* Center vertically when using column */
.container {
  justify-content: center;
}

/* Make vertical centering visible */
.container {
  min-height: 100vh;
}

Rules to remember

• Default Flexbox direction is row
• justify-content works on the **main axis`
• align-items works on the cross axis
• Changing flex-direction changes what horizontal and vertical mean
• Vertical centering needs extra container height
• Use .row for a class selector, not row

Common pattern

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

How do I center a div both horizontally and vertically with Flexbox?

Use display: flex, then choose the correct axis:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

If you want items stacked vertically, also add flex-direction: column.

Why is justify-content: center not centering horizontally?

Because it centers along the main axis. If flex-direction: column, the main axis is vertical, not horizontal.

Why is vertical centering not working in my flex container?

Usually because the container has no height. Add height or min-height, such as min-height: 100vh.

Should I use div or span for flex items?

Either can work, but div is usually easier for box-like layouts. A span is inline by default, so width and height can be confusing unless you change its display.

How do I put each item on a new row with Flexbox?

• CSS Flexbox axes — Understanding main axis and cross axis is essential for correct alignment.
• flex-direction — It controls whether items are laid out in a row or a column.
• justify-content — Used to align items along the main axis.
• align-items — Used to align items along the cross axis.
• CSS Grid centering — A related layout method for centering content in two dimensions.
• Block vs inline elements — Important when width and height seem not to apply as expected.
• Viewport units (vh) — Useful when making vertical centering visible across the full screen.
• gap in Flexbox — A cleaner way to add space between flex items than using margins.