Design.dev design.dev

CSS Centering Guide

Master all the ways to center elements in CSS—horizontally, vertically, or both. From modern Flexbox and Grid techniques to classic positioning, this guide covers every centering method with practical examples.

Flexbox Centering

The most popular modern approach. Flexbox makes centering trivial with just a few properties.

Center both axes (perfect centering)

.container {
  display: flex;
  justify-content: center;  /* horizontal */
  align-items: center;      /* vertical */
  min-height: 100vh;        /* optional: full viewport height */
}

This is the most common and reliable way to center content. Works for single or multiple items.

Try it: Flexbox Perfect Centering
Centered

Center horizontally only

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

/* Alternative: center a single child */
.container {
  display: flex;
}
.child {
  margin: 0 auto;
}

Center vertically only

.container {
  display: flex;
  align-items: center;
  min-height: 200px;  /* needs height to see effect */
}

Center with flex direction column

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;  /* vertical centering in column */
  align-items: center;      /* horizontal centering in column */
  min-height: 100vh;
}

Note: In flex-direction: column, the main axis is vertical, so justify-content centers vertically.

Center with gap (modern spacing)

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;  /* space between multiple centered items */
}
Try it: Center Multiple Items with Gap
1
2
3

Grid Centering

CSS Grid offers multiple powerful ways to center content with even less code than Flexbox.

Center both axes (shortest method)

.container {
  display: grid;
  place-items: center;  /* shorthand for align-items + justify-items */
  min-height: 100vh;
}

The place-items shorthand is the most concise centering method in CSS.

Try it: Grid place-items (Shortest Code!)
Centered

Center with place-content

.container {
  display: grid;
  place-content: center;  /* centers the grid tracks themselves */
  min-height: 100vh;
}

/* Useful for centering multiple items as a group */
.container {
  display: grid;
  place-content: center;
  gap: 1rem;
}
Try it: Grid place-content (centers group)
1
2
3

Center horizontally only

.container {
  display: grid;
  justify-items: center;  /* or justify-content: center */
}

/* Alternative using margin */
.container {
  display: grid;
}
.child {
  justify-self: center;
}

Center vertically only

.container {
  display: grid;
  align-items: center;  /* or align-content: center */
  min-height: 200px;
}

Center a single grid cell

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.centered-item {
  justify-self: center;  /* horizontal within cell */
  align-self: center;    /* vertical within cell */
}

Absolute Position Centering

Classic technique using absolute positioning. Still useful for overlays, modals, and specific layouts.

Center with transform (modern approach)

.container {
  position: relative;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Works without knowing dimensions */

The transform method works regardless of the element's dimensions.

Try it: Absolute + Transform (No Dimensions Needed)
Centered

Center with inset (modern shorthand)

.container {
  position: relative;
}

.centered {
  position: absolute;
  inset: 0;  /* top: 0; right: 0; bottom: 0; left: 0; */
  margin: auto;
  width: 300px;   /* needs explicit dimensions */
  height: 200px;
}

Center with margin calc (classic)

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 200px;
  margin-top: -100px;   /* negative half of height */
  margin-left: -150px;  /* negative half of width */
}

/* Requires knowing exact dimensions */

Center horizontally only

.centered {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

Center vertically only

.centered {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Tip: The transform method is preferred over negative margins because it doesn't require knowing the element's dimensions.

Margin Auto

The classic horizontal centering technique. Simple and reliable for block-level elements.

Center block element horizontally

.centered {
  width: 600px;        /* needs explicit width */
  margin-left: auto;
  margin-right: auto;
  /* or shorthand: margin: 0 auto; */
}

Works on any block-level element with a defined width.

Try it: Margin Auto (Horizontal Only)
Centered

Center with max-width (responsive)

.centered {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;  /* prevents edge touch on small screens */
}

Common pattern for centering page content with a max width.

Why margin auto doesn't work vertically

/* This DOES NOT work for vertical centering */
.container {
  height: 500px;
}

.centered {
  margin-top: auto;
  margin-bottom: auto;  /* ❌ No effect */
}

/* Reason: Normal flow doesn't distribute vertical auto margins.
   Use flexbox, grid, or absolute positioning instead. */

Text & Inline Elements

Special techniques for centering text and inline elements.

Center text horizontally

.text-center {
  text-align: center;
}

/* Centers inline content: text, images, inline-block */
Try it: text-align: center

This text is centered horizontally

Works for any inline content

Center text vertically (single line)

.centered-text {
  height: 100px;
  line-height: 100px;  /* match container height */
}

/* Works only for single line of text */

Center text vertically (multi-line)

/* Method 1: Flexbox (recommended) */
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

/* Method 2: Table display (legacy) */
.container {
  display: table;
  width: 100%;
  height: 200px;
}
.text {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

Center inline-block elements

.container {
  text-align: center;  /* centers inline-block children */
}

.item {
  display: inline-block;
  text-align: left;    /* reset text alignment inside */
}

Vertical-align (inline context only)

/* Only works for inline/inline-block elements */
.container {
  line-height: 200px;
}

.inline-element {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}

/* ⚠️ vertical-align does NOT work on block elements */

Modern Centering Techniques

New CSS features that make centering even easier.

Container with inset & margin (no transform)

.container {
  position: relative;
  height: 400px;
}

.centered {
  position: absolute;
  inset: 0;
  width: fit-content;   /* or max-content */
  height: fit-content;
  margin: auto;
}

/* Modern alternative to transform method */

Logical properties (RTL-friendly)

.centered {
  max-inline-size: 1200px;  /* instead of max-width */
  margin-inline: auto;       /* instead of margin: 0 auto */
  padding-inline: 1rem;
}

/* Respects writing direction (LTR/RTL) */

Aspect ratio centering

.container {
  display: grid;
  place-items: center;
}

.box {
  aspect-ratio: 1;  /* maintains square during centering */
  width: 300px;
}

Subgrid centering (future)

.parent-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  place-items: center;
}

.child-grid {
  display: grid;
  grid-template-columns: subgrid;  /* inherits parent centering */
  grid-column: span 3;
}

Common Centering Patterns

Hero section / Full page center

.hero {
  display: grid;
  place-items: center;
  min-height: 100vh;
  text-align: center;
  padding: 2rem;
}
Try it: Hero Section Pattern

Welcome Hero

Centered vertically and horizontally
Perfect for landing pages

Get Started

Modal / Dialog centering

.modal-overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.8);
}

.modal {
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow: auto;
}
Try it: Modal/Dialog Pattern

Modal Dialog

Centered overlay using Grid with place-items for perfect alignment.

Close

Card content centering

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

.card-icon {
  margin-bottom: 1rem;
}

.card-title {
  margin: 0.5rem 0;
}

Centered navigation

/* Horizontal nav */
.nav {
  display: flex;
  justify-content: center;
  gap: 2rem;
  list-style: none;
}

/* Vertical nav */
.nav-vertical {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

Center with max-width constraint

.wrapper {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

.content {
  width: 100%;
  max-width: 800px;
  padding: 2rem;
}

Responsive centered columns

.container {
  display: grid;
  place-items: center;
  gap: 2rem;
  padding: 2rem;
}

.columns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}

.column {
  flex: 1 1 300px;
  max-width: 400px;
}

Icon with text centering

.icon-text {
  display: inline-flex;  /* or flex */
  align-items: center;
  gap: 0.5rem;
}

.icon {
  flex-shrink: 0;  /* prevents icon from shrinking */
  width: 20px;
  height: 20px;
}

Gotchas & Tips

Vertical margin auto doesn't work

margin: auto only centers horizontally in normal flow. For vertical centering, use Flexbox, Grid, or absolute positioning.

Transform creates new stacking context

Using transform creates a new stacking context, which can affect z-index behavior of children.

Min-height vs height

Use min-height instead of height to allow content to grow without overflow.

Text-align only works on inline content

text-align: center centers inline and inline-block elements, not block-level elements.

Vertical-align confusion

vertical-align only works on inline/inline-block/table-cell elements, not block elements or flex/grid items.

Fixed positioning

With position: fixed, use the same centering techniques as absolute, but it centers relative to viewport.

Subpixel rendering

Transform-based centering can cause blurry rendering. Add transform-style: preserve-3d or use Grid/Flexbox for pixel-perfect results.

Percentage widths

When centering with margin: auto, percentage widths work but the element still needs a width value (can't be width: auto).

Best Practices:

  • Use Flexbox for centering items in a one-dimensional layout (row or column)
  • Use Grid with place-items: center for the shortest, most semantic centering
  • Use margin: 0 auto for simple horizontal centering of block elements
  • Avoid vertical-align and line-height tricks unless dealing with inline elements
  • Use transform for absolute positioning when dimensions are unknown
  • Prefer logical properties (margin-inline: auto) for international sites

Quick Reference

Method Use Case Pros Cons
Flexbox Most centering scenarios Flexible, works on unknown sizes Slightly more verbose than Grid
Grid place-items Perfect centering, shortest code Most concise, powerful Requires Grid support
margin: 0 auto Horizontal centering only Simple, widely supported Requires explicit width, horizontal only
position + transform Overlays, modals, absolute positioning Works without knowing dimensions Creates stacking context, can blur
text-align: center Text and inline elements Dead simple for text Only works on inline content

Related Tools & Guides

Flexbox Playground

Learn and experiment with CSS Flexbox

CSS Grid Guide

Master CSS Grid layout