Flexbox Fix

Fix Flexbox not centering elements the right way.

If your element refuses to center with Flexbox, Flexbox is usually not broken. The real problem is often simpler: you are centering on the wrong axis, using the wrong parent, or trying to center inside a container that has no usable space.

Browse CSS Fixes See the Difference

Very common bug
Usually an axis issue
Often fixed in minutes

What the bug looks like

The element stays stuck to one side, only centers in one direction, or looks like it is ignoring your alignment rules.

Why it happens

Flexbox alignment depends on axis direction, container space, and which element is actually the flex parent.

What usually fixes it

Check the correct axis first, then verify the parent, available height, and whether the child can actually appear centered visually.

The correct centering

Standard pattern

.container {
  display: flex;
  justify-content: center; /* main axis */
  align-items: center;     /* cross axis */
  height: 300px;
}

Why this works

Flexbox has two axes, and each alignment property controls a different one.

Main axis → controlled by justify-content
Cross axis → controlled by align-items

Most centering bugs happen because these two get mixed up, or because the developer expects one property to do the work of both.

Common broken version

Axis mismatch

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

Why this fails

In the default row direction, align-items centers on the cross axis, which means vertical alignment. It does not horizontally center the child.

If your layout direction is horizontal, the main axis goes left to right. That means horizontal centering belongs to justify-content.

Wrong axis selected

This is the most common reason Flexbox “does not center.” The wrong property is being used for the direction that matters.

No usable vertical space

Even correct vertical centering looks broken if the parent has no height, because there is nothing to center inside.

Visual centering is not real centering

A full-width child can technically be centered, but still look left-aligned because the content inside the child is not centered.

Fast rule

If Flexbox is not centering, ask this first: am I using the correct axis? That one question solves a huge percentage of Flexbox alignment bugs.

When vertical centering fails

If align-items: center seems to do nothing, the parent often has no meaningful height. Flexbox cannot visually center something in a direction where there is almost no space.

Check whether the container has height or min-height
Make sure the element you are centering is inside the actual flex parent
Inspect whether the parent is collapsing to the height of its content

Fix example

Add usable space

.container {
  display: flex;
  align-items: center;
  min-height: 200px;
}

Why the child can make centering look wrong

Sometimes the flex alignment is technically correct, but the child itself is full width or contains left-aligned content. That makes people think the item is not centered, when the real issue is inside the child, not the flex parent.

In those cases, you may need to center the child’s content separately or reduce the child width so the centering becomes visually obvious.

Common visual confusion

Child still looks left

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

.child {
  width: 100%;
}

Debug checklist

Check the axis first In a row layout, horizontal centering usually means justify-content. Vertical centering usually means align-items.

Confirm the real flex parent The element you want centered must be a child of the container that actually has display: flex.

Check height for vertical centering If the container has no height, vertical centering will not look meaningful.

Inspect the child width A full-width child may create the illusion that centering is not happening.

Keep fixing layout bugs faster.

Explore more real-world CSS fixes or jump into the full FrontFixer library.

Browse CSS Fixes All Fixes

Fix Flexbox not centering (the right way)