Why align-items: center Feels Broken

align-items: center is one of those CSS rules that feels like it should solve everything.

You have a row. You want the things in the row to line up. You add:

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

And sometimes it works perfectly.

Other times, the icon still looks too high, the text looks low, or the button refuses to feel visually centred.

The rule is not broken. The mental model usually is.

align-items works on the cross axis

In Flexbox, align-items aligns flex items on the cross axis.

For a normal row, the main axis runs left to right, so the cross axis runs top to bottom.

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

That centres the item boxes vertically inside the row.

But if the flex direction changes, the axes change too.

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

In a column, the main axis runs top to bottom, so the cross axis runs left to right. Now align-items: center centres items horizontally, not vertically.

This is the first thing to check when alignment feels wrong: what direction is the flex container using?

It centres boxes, not pixels

align-items: center does not visually align the contents of each item. It aligns the item’s layout box.

That distinction matters when mixing text, icons, and controls.

Text has line-height. Icons have viewBoxes. Buttons have padding. Inputs have browser styles. Two things can be mathematically centred while still looking optically off.

A common example:

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.badge svg {
  width: 1em;
  height: 1em;
}

If the icon still looks wrong, inspect the SVG viewBox or the text line-height before changing the flex alignment.

Line-height is often the culprit

Text does not occupy only the visible letters. The line box includes extra vertical space for ascenders, descenders, and leading.

When an icon sits next to text, the icon may be centred against the line box rather than the visible letterforms.

For compact UI elements, an explicit line-height often helps:

.button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  line-height: 1;
}

For longer text, avoid forcing line-height: 1; it can hurt readability. Use it carefully for badges, buttons, nav items, and other small controls.

Sometimes you need justify-content

A frequent mistake is using align-items when the problem is actually on the main axis.

For a row:

.row {
  display: flex;
  align-items: center;      /* vertical */
  justify-content: center;  /* horizontal */
}

For a column, that flips:

.stack {
  display: flex;
  flex-direction: column;
  align-items: center;      /* horizontal */
  justify-content: center;  /* vertical */
}

When something will not centre, check whether you are trying to align on the main axis or the cross axis.

A quick debugging checklist

When align-items: center feels broken, I usually check these in order:

• Is the container actually display: flex?
• Is flex-direction row or column?
• Am I aligning the cross axis or the main axis?
• Does the child have extra padding, margin, or line-height?
• Does the SVG have a weird viewBox?
• Is one item taller than expected because of content wrapping?

Most alignment bugs become obvious once you inspect the boxes instead of judging by sight alone.

The rule of thumb

Use align-items to align boxes on the cross axis.

Use justify-content to align boxes on the main axis.

Use line-height, padding, icon sizing, and SVG cleanup to fix optical alignment.

CSS is usually doing exactly what you asked. The trick is making sure you are asking the right axis — and the right box.