Flexbox Centering — Center Elements Vertically and Horizontally

Centering elements was notoriously difficult in CSS for years. Flexbox makes it trivial. Three lines of CSS center anything horizontally, vertically, or both ways simultaneously.

Use the Flexbox Generator to build and visualize flexbox layouts.

Center horizontally and vertically

.container {
  display: flex;
  justify-content: center;  /* Center on main axis (horizontal) */
  align-items: center;      /* Center on cross axis (vertical) */
}

The container needs a defined height for vertical centering:

/* Full viewport centering: */
.page-center {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

/* Center within a card: */
.card {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

/* Center within a section: */
.hero {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 500px;
}

Center horizontally only

.container {
  display: flex;
  justify-content: center;
  /* No align-items — defaults to stretch */
}

Items are horizontally centered, but stretch to fill the container’s height.

Center vertically only

.container {
  display: flex;
  align-items: center;
  height: 200px;  /* Height must be defined */
}

Items are vertically centered, stacked horizontally from left.

Center a single item with margin auto

When you have one item in a flex container, margin: auto absorbs all available space:

.container {
  display: flex;
  height: 200px;
}

.item {
  margin: auto;  /* Centers both horizontally and vertically */
}

margin-left: auto pushes item to the right. margin-right: auto pushes to the left. margin: auto splits available space equally in all directions.

Centering in a navigation bar

/* Logo left, nav center, action right: */
.navbar {
  display: flex;
  align-items: center;
  padding: 0 24px;
  height: 64px;
}

.nav-logo { /* Left — stays at start */ }

.nav-links {
  display: flex;
  gap: 24px;
  margin: 0 auto;  /* Centers by absorbing space on both sides */
}

.nav-actions { /* Right — pushed by margin auto */ }

Column centering

When flex-direction: column, justify-content centers vertically and align-items centers horizontally:

.column-center {
  display: flex;
  flex-direction: column;
  justify-content: center;  /* Vertical (main axis is now vertical) */
  align-items: center;      /* Horizontal (cross axis is now horizontal) */
  min-height: 400px;
}

Centering multiple items with gap

.button-group {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

/* Result: buttons centered horizontally with 16px spacing between them */

Text centering vs element centering

/* THIS centers the element itself in the flex container: */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* THIS centers the text inside a non-flex element: */
.element {
  text-align: center;
}

/* Combining both: center the card AND its text content */
.card-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.card {
  text-align: center;  /* Centers text within the card */
  padding: 24px;
}

Common centering mistakes

Forgetting height on container:

/* DOESN'T WORK — container has no height to center within: */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  /* No height! */
}

/* FIX: */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;  /* Now has height to center within */
}

Confusing main axis direction:

/* With default flex-direction: row */
justify-content: center;  /* Horizontal centering */
align-items: center;       /* Vertical centering */

/* With flex-direction: column */
justify-content: center;  /* VERTICAL centering (axis flipped) */
align-items: center;       /* HORIZONTAL centering (axis flipped) */

Using display: flex on the item instead of container:

/* WRONG: centering the content inside the item, not the item itself */
.item { display: flex; justify-content: center; }

/* CORRECT: centering the item within its container */
.container { display: flex; justify-content: center; }

Flexbox vs Grid centering

/* Flexbox centering: */
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* CSS Grid centering (even simpler): */
.grid-center {
  display: grid;
  place-items: center;  /* Shorthand for align-items + justify-items */
}

/* Grid place-content for centering multiple items: */
.grid-content-center {
  display: grid;
  place-content: center;  /* Shorthand for align-content + justify-content */
  gap: 16px;
}

For centering a single item, display: grid; place-items: center; is more concise. For centering multiple items in a row, flexbox is more natural.

Related tools

• Flexbox Generator — build flexbox layouts visually
• CSS Flexbox Cheatsheet — all flexbox properties
• Flexbox Layout Tutorial — layout patterns