Centering in CSS with Flexbox: all the methods

Centering elements is one of the most common tasks in web layout. Before Flexbox, developers used margin: auto, position: absolute with transform, tables, or a display: inline-block hack. Flexbox solves these tasks more simply and predictably. This article covers all the main Flexbox centering patterns.

Basic centering along both axes

The most common case is centering one or more elements horizontally and vertically inside a container:

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

• justify-content: center — alignment along the main axis (horizontal by default)
• align-items: center — alignment along the cross axis (vertical by default)

The container needs a fixed height (for example, min-height: 100vh or height: 400px); otherwise, the cross axis will not have enough height for centering.

Horizontal centering

For one-dimensional horizontal centering (a row of elements):

.row-centered {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

The elements are arranged in a row and centered along the main axis. gap adds spacing between the elements.

Vertical centering

To center elements vertically in a single row:

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

All flex items are aligned to the center of the cross axis. The container again needs a fixed height.

Centering with flex-direction: column

When the main axis is vertical (flex-direction: column), the roles switch:

• justify-content: center — vertical centering
• align-items: center — horizontal centering

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

Centering multiple elements

When there are multiple elements, they are centered as a group:

.group-centered {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

With flex-wrap: wrap, elements wrap when there is not enough space, but each row remains centered.

Centering with padding

If the container has padding, centering accounts for it automatically:

.centered-with-padding {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 2rem;
  box-sizing: border-box;
}

Centering with align-self

To override the alignment of one item within a group:

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

.centered-item {
  align-self: center;
}

Centering text inside a flex item

Flexbox aligns the items themselves, not the text inside them. To center text inside a flex item, use text-align: center:

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

Or wrap the text in an additional block and center it with Flexbox:

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

.card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

Centering with flex-grow

When one item needs to take up all available space while the others remain centered:

.header {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.header-left {
  flex: 1;
  text-align: left;
}

.header-center {
  flex: 0 0 auto;
}

.header-right {
  flex: 1;
  text-align: right;
}

The center item does not grow; the side items take up equal amounts of space.

Centering a modal window

A typical pattern for a modal is centering it on the screen:

.modal-overlay {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.modal {
  max-width: 90vw;
  max-height: 90vh;
  overflow: auto;
}

Centering with scrolling

If the content may be taller than the viewport, use min-height and overflow:

.scrollable-centered {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 2rem;
  box-sizing: border-box;
}

.scrollable-centered > * {
  max-width: 100%;
}

When the content overflows, it can be scrolled but remains centered whenever possible.

Centering with flex-wrap and align-content

When there are multiple rows (flex-wrap: wrap) and the rows need to be centered vertically as a group:

.multi-row-centered {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  gap: 1rem;
  min-height: 100vh;
}

align-content: center centers all the rows as a block along the cross axis.

Tools for experimentation

To quickly test and debug centering, use the Flexbox Playground on rechecker.ru. The tool lets you change justify-content, align-items, and flex-direction and see the result immediately.

Comparison with other methods

Common mistakes

1. Forgetting the container height — without min-height or height on the container, vertical centering does not work because the cross axis has no size.

2. Confusing the axes with column — with flex-direction: column, the main axis is vertical, and justify-content controls vertical alignment.

3. Centering text — Flexbox centers items, not text. To center text inside an item, use text-align: center or a nested flex container.

Centering in an RTL context

With direction: rtl or the dir="rtl" attribute, the main axis direction changes. Centering still works correctly: justify-content: center and align-items: center account for the direction.

.rtl-container {
  direction: rtl;
  display: flex;
  justify-content: center;
  align-items: center;
}

Centering with aspect-ratio

To center square or rectangular content while maintaining its proportions:

.centered-square {
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1;
  max-width: 400px;
  max-height: 400px;
}

Centering and accessibility

When centering modal windows and overlays, make sure focus stays inside the modal (focus trap) and that screen readers announce the structure correctly. Flexbox does not directly affect accessibility, but centered content must be marked up correctly (roles, aria attributes).

Additional resources

For a detailed guide to all Flexbox properties, see CSS Flexbox: a complete guide with examples. For a comparison of Flexbox and CSS Grid in different situations, see Flexbox vs CSS Grid: when to use each.

Centering with flex-wrap

With flex-wrap: wrap and multiple rows, align-content: center centers all the rows vertically:

.wrapped-centered {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  gap: 1rem;
  min-height: 100vh;
}

Centering with margin: auto

On a flex item, margin: auto absorbs free space. To center one item in a container:

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

.centered-single > * {
  margin: auto;
}

Centering with gap

gap does not affect centering — it adds spacing between elements. Centering is controlled by justify-content and align-items.

Browser compatibility

Flexbox with justify-content: center and align-items: center is supported in all modern browsers. For IE10–11, -ms- prefixes may be required.