Flexbox Centering: Complete Guide

The Centering Problem

Centering elements in CSS has a notorious reputation. Before Flexbox, developers juggled margin: auto, text-align, line-height hacks, and absolute positioning with transform: translate. Flexbox solves all of these cases with two properties. This guide covers every centering scenario Flexbox handles.

Horizontal Centering

Inline and Text Content

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

justify-content aligns items along the main axis (horizontal by default). Setting it to center pushes all flex children to the center of the row.

Block-Level Elements

The same rule applies — justify-content: center centers any flex child regardless of its display type. No margin: 0 auto needed.

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

.card {
  width: 400px; /* Centers within the flex row */
}

Vertical Centering

Single Line of Text

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

align-items controls the cross axis (vertical by default). This centers flex children vertically within the container.

Full-Height Vertical Center

.hero {
  display: flex;
  align-items: center;
  min-height: 100vh; /* Needs a defined height */
}

Vertical centering requires the container to have a height. Without it, the container shrinks to fit content and there is nothing to center within.

Both Axes at Once

The classic full center — horizontal and vertical — requires both properties:

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

This is the most common centering pattern. Modal overlays, hero sections,, and empty states all use it.

Shorthand With place-items

.center-both {
  display: flex;
  place-items: center;
  min-height: 100vh;
}

place-items sets both align-items and justify-items. In Flexbox, justify-items is ignored on the container, but place-items: center effectively sets align-items: center — and combined with justify-content: center, achieves the same result. Most developers still prefer the explicit two-property version for clarity.

Centering a Single Item With margin: auto

When a flex container has only one child to center, margin: auto on the child works:

.container {
  display: flex;
  min-height: 100vh;
}

.modal {
  margin: auto; /* Centers on both axes */
}

Flexbox distributes free space evenly when a child has margin: auto in a flex direction. This technique is useful when you cannot modify the container's justify-content or align-items — for example, when sibling items should not be centered.

Centering Wrapped Content

When flex items wrap, justify-content: center centers each row as a group:

.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

Items on each line are centered, and wrapped lines stack naturally. This produces a centered cloud effect common in tag lists and filter UIs.

Common Pitfalls

Missing Container Height

align-items: center does nothing if the container has no explicit height. The container collapses to the content height, leaving zero free space to distribute.

/* Broken — no height to center within */
.container {
  display: flex;
  align-items: center; /* No effect */
}

/* Fixed — explicit height */
.container {
  display: flex;
  align-items: center;
  min-height: 400px;
}

Centering vs. Text Alignment

Flexbox centers flex items, not text inside them. If you want text centered within a flex child, use text-align: center on the child:

.child {
  text-align: center; /* Centers inline text */
}

Unequal Item Sizes

When flexchildren have different widths, justify-content: center centers the group, but the visual center may not align with a specific child. Use align-self: center on individual children for per-item vertical adjustment.

Quick Reference

Key Takeaways

• justify-content: center handles horizontal centering on the main axis.
• align-items: center handles vertical centering on the cross axis.
• Vertical centering requires a defined container height.
• margin: auto on a flex child centers it on both axes without touching the container.
• Flexbox centers flex items, not text — use text-align: center for inline content.
• For wrapped layouts, justify-content: center centers each row as a group.

Try It Yourself

Build and preview centered layouts interactively with the Flexbox Generator.