Question

How to Center Items Horizontally and Vertically with Flexbox in CSS

htmlcssflexbox

Question

How can I center a div horizontally and vertically inside a container using Flexbox?

In the example below, I want each number to appear on its own row, with every row centered horizontally inside the container.

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.row {
  width: 100%;
}

.flex-item {
  background: tomato;
  padding: 5px;
  width: 200px;
  height: 150px;
  margin: 10px;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}

<div class="flex-container">
  <div class="row">
    <span class="flex-item">1</span>
  </div>
  <div class="row">
    <span class="flex-item">2</span>
  </div>
  <div class="row">
    <span class="flex-item">3</span>
  </div>
  <div class="row">
    <span class="flex-item">4</span>
  </div>
</div>

What Flexbox properties should be used so the items stack vertically and stay centered horizontally, and how does vertical centering work in this setup?

Short Answer

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.

Concept

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;
justify-content: center;

Another key point: vertical centering only becomes visible if the container has extra height. If the container height is only as tall as its content, there is no free vertical space to center within.

Mental Model

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.

Take Quiz

Syntax and Examples

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;
  min-height: 100vh;
}

.item {
  width: 200px;
  height: 150px;
  margin: 10px;
  background: tomato;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  font-weight: bold;
}

Why this works

display: flex turns the container into a flex container
flex-direction: column stacks children vertically
align-items: center centers the children horizontally
justify-content: center centers the whole vertical stack within the container height
min-height: 100vh gives the container enough height for vertical centering to be visible

Applying it to the original structure

If you want to keep the .row wrappers:

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

.row {
  display: flex;
  justify-content: center;
  width: 100%;
}

.flex-item {
  display: flex;
  align-items: center;
  justify-content: center;
  background: tomato;
  width: 200px;
  height: 150px;
  margin: 10px;
  color: white;
  font-weight: bold;
  font-size: 3em;
}

Here, each .row takes full width, and justify-content: center centers the item inside that row.

Step by Step Execution

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

display: flex makes .container a flex container.
flex-direction: column changes the main axis from horizontal to vertical.
The two .box elements are now placed one below the other.
align-items: center centers each box across the cross axis.
- Because the direction is column, the cross axis is horizontal.
- So the boxes move to the horizontal center.
justify-content: center centers the whole stack along the main axis.
- Because the direction is column, the main axis is vertical.
- So the two boxes move to the vertical center of the 400px container.
If height: 400px were removed, the container would shrink to fit the boxes, and there would be no visible vertical centering.

Visual interpretation

column = stack top to bottom
align-items: center = center left to right
justify-content: center = center top to bottom

Real World Use Cases

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

Take Quiz

Real Codebase Usage

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
height: 400px
min-height: 300px

Without a height, vertical centering may appear to “not work”.

5. Using `gap` instead of margins

Instead of adding margins to each item:

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

This is often cleaner and easier to maintain.

Common Mistakes

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;
}

If the container has no height, the content may already fill it exactly.

Fix:

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

4. Styling `row` instead of `.row`

Broken example:

row {
  width: 100%;
}

This targets an HTML element named <row>, not a class.

Fix:

.row {
  width: 100%;
}

5. Using `span` for block-like layout without adjusting display

A span is inline by default. Width and height do not behave as expected on inline elements.

Safer fix:

.flex-item {
  display: flex;
}

Or use a div instead of a span.

6. Using `line-height` for centering when Flexbox can do it better

This works only in specific cases, usually single-line text with fixed height.

Better approach:

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

Comparisons

Layout approach	Best for	Strengths	Limitations
`text-align: center`	Centering inline text horizontally	Very simple	Does not vertically center block elements
`margin: 0 auto`	Centering a fixed-width block horizontally	Easy for single blocks	No vertical centering
Flexbox	Aligning items in one dimension	Great for horizontal or vertical centering	Less ideal for two-dimensional grid layouts
CSS Grid	Two-dimensional layouts	Excellent for full-page centering and grid placement	Can be more than needed for simple linear layouts

Flexbox row vs column

`flex-direction`	Main axis	`justify-content` affects	`align-items` affects
`row`	Horizontal	Horizontal alignment	Vertical alignment
`column`	Vertical	Vertical alignment	Horizontal alignment

Flexbox vs Grid for centering

If you only need a vertical stack or a single row, Flexbox is usually the simpler choice.

Example Grid centering:

.container {
  display: grid;
  place-items: center;
}

That is great for simple full centering, but Flexbox gives more control when stacking items in a specific direction.

Take Quiz

Cheat Sheet

/* 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;
  justify-content: center;
  min-height: 100vh;
  gap: 10px;
}

Center content inside each item

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

If you keep row wrappers

.row {
  width: 100%;
  display: flex;
  justify-content: center;
}

FAQ

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?

Use flex-direction: column if you want a vertical stack. If you keep wrapper rows, make each row a flex container and center its content.

Is Flexbox or Grid better for centering?

Flexbox is usually best for one-dimensional layouts like a row or a column. Grid is great for two-dimensional layouts or when you want place-items: center.

Can I center text inside each box with Flexbox too?

Yes. Make the box itself a flex container:

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

Related Concepts

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.

Take Quiz

Mini Project

Description

Build a simple full-page number panel where several boxes are stacked vertically and centered in the browser window. This project demonstrates how flex-direction, align-items, justify-content, and container height work together in a realistic layout.

Goal

Create a vertically stacked list of boxes that is centered horizontally and vertically using Flexbox.

Requirements

Create a container that fills the visible page height.
Stack four boxes vertically inside the container.
Center the stack horizontally and vertically.
Center the number inside each box.
Add spacing between boxes without relying on line-height hacks.

Take Quiz

Keep learning

How to Center Items Horizontally and Vertically with Flexbox in CSS

Question

Short Answer

Concept

Mental Model

Syntax and Examples

Example: stack items vertically and center them

Why this works

Applying it to the original structure

Step by Step Execution

What happens step by step

Visual interpretation

Real World Use Cases

Common examples

In your case

Real Codebase Usage

1. Full-page centering

2. Vertical stack with centered children

3. Centering inside a component

4. Guarding layout with explicit height

5. Using gap instead of margins

Common Mistakes

1. Forgetting flex-direction: column

2. Using the wrong alignment property for the axis

3. Expecting vertical centering without container height

4. Styling row instead of .row

5. Using span for block-like layout without adjusting display

6. Using line-height for centering when Flexbox can do it better

Comparisons

Flexbox row vs column

Flexbox vs Grid for centering

Cheat Sheet

Rules to remember

Common pattern

Center content inside each item

If you keep row wrappers

FAQ

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

Why is justify-content: center not centering horizontally?

Why is vertical centering not working in my flex container?

Should I use div or span for flex items?

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

Is Flexbox or Grid better for centering?

Can I center text inside each box with Flexbox too?

Related Concepts

Mini Project

Description

Goal

Requirements

Related questions

Add a Favicon to a Static HTML Page

Allow Only Numeric Input (0-9) in HTML Input Using jQuery

Apply CSS !important with jQuery .css()

5. Using `gap` instead of margins

1. Forgetting `flex-direction: column`

4. Styling `row` instead of `.row`

5. Using `span` for block-like layout without adjusting display

6. Using `line-height` for centering when Flexbox can do it better

Why is `justify-content: center` not centering horizontally?

Should I use `div` or `span` for flex items?