layoutflexbox

Centering anything with Flexbox

Centering in CSS used to be notoriously difficult. With Flexbox it takes two to three properties. Here is every centering pattern you will need.

The two-property center

The simplest and most common pattern. justify-content: center handles the main axis, align-items: center handles the cross axis. Together they center content in both directions.

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

/* Add min-height if you need vertical centering
   relative to the viewport */
.full-page-center {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100dvh;
}

This works for a single child or multiple children. With multiple children, they will sit side by side in the center (because the default flex direction is row).

Horizontal centering only

When you only need horizontal centering, use justify-content: center alone. The cross-axis alignment defaults to stretch, so items fill the container's height.

/* Center a group of buttons horizontally */
.button-group {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

/* Center a single element (alternative to margin: auto) */
.single-center {
  display: flex;
  justify-content: center;
}

/* With flex-direction: column, justify-content
   acts on the VERTICAL axis instead */
.column-horizontal-center {
  display: flex;
  flex-direction: column;
  align-items: center;   /* horizontal in column mode */
}

Remember: justify-content always acts on the main axis. In flex-direction: column, the main axis is vertical, so use align-items for horizontal centering instead.

Vertical centering only

align-items: center vertically centers items in a row-direction flex container. The container needs a defined height — either explicit or from its parent — for vertical centering to be visible.

/* Vertically center items in a nav bar */
.nav {
  display: flex;
  align-items: center;
  height: 4rem;
  padding-inline: 1.5rem;
  gap: 1rem;
}

/* Vertically center a single item with auto margin */
.container {
  display: flex;
  height: 20rem;
}
.container > .child {
  margin-block: auto;  /* pushes equally from top and bottom */
}

Centering with margin: auto

In a flex container, margin: auto absorbs all available space in that direction. This is a powerful alternative to alignment properties, especially when you need to center one item while pushing others to the edges.

/* Center a single child in both directions */
.parent {
  display: flex;
  min-height: 100dvh;
}
.child {
  margin: auto;  /* absorbs all extra space equally */
}

/* Center the middle item, push others to edges */
.toolbar {
  display: flex;
  align-items: center;
}
.toolbar__logo   { /* sits on the left naturally */ }
.toolbar__title  { margin-inline: auto; }  /* centered */
.toolbar__action { /* sits on the right naturally */ }

/* Push a footer item to the bottom */
.sidebar {
  display: flex;
  flex-direction: column;
  height: 100dvh;
}
.sidebar__footer {
  margin-block-start: auto;  /* pushes to bottom */
}

Centering wrapped flex items

When flex items wrap, align-content controls how the wrapped lines are distributed on the cross axis. Use align-content: center to vertically center the entire group of wrapped rows.

/* Center a wrapping tag cloud vertically */
.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;   /* center items in each row */
  align-content: center;     /* center the rows themselves */
  gap: 0.5rem;
  min-height: 12rem;
}

/* Note: align-content has no effect without flex-wrap.
   On a single non-wrapping line, use align-items instead. */

align-content accepts the same values as justify-content: center, flex-start, flex-end, space-between, space-around, and space-evenly.

Centering text inside buttons and links

Buttons and link-styled-as-buttons are one of the most common centering use cases. Flexbox gives you precise control over both the text and any icons.

/* Button with centered text */
.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0.625rem 1.25rem;
  min-width: 8rem;
  border-radius: 0.375rem;
  background: oklch(0.52 0.22 265);
  color: oklch(1 0 0);
  font-weight: 600;
}

/* Button with icon + text */
.btn--icon {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.btn--icon svg {
  flex-shrink: 0;
  width: 1.25em;
  height: 1.25em;
}

Use inline-flex instead of flex so the button sizes to its content rather than filling the full width. Add min-width if you need a minimum clickable area.

When to use Grid centering instead

Flexbox centering requires two properties. Grid can do it in one with place-items: center. Choose Grid when you are centering a single child and want the shortest code. Choose Flexbox when you are centering a row of items with gap between them.

/* Grid: one property, one child */
.grid-center {
  display: grid;
  place-items: center;
  min-height: 100dvh;
}

/* Flexbox: better for multiple items with gap */
.flex-center-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  min-height: 100dvh;
}