CSS Grid vs Flexbox: Which One Should You Use to Center a Div?

howtocenterdiv.com — Written by a dev who has centered too many divs to count.

The Short Answer

Flexbox Centering: The Workhorse

The Classic 3-Line Center

cssCopy
.container {
  display: flex;
  justify-content: center; /* main axis */
  align-items: center;     /* cross axis */
}

htmlCopy
<div class="container">
  <div class="box">I am centered.</div>
</div>

Tailwind Equivalent

htmlCopy
<div class="flex justify-center items-center">
  <div>I am centered.</div>
</div>

Full Viewport Centering with Flexbox

cssCopy
1.full-center {
2  display: flex;
3  justify-content: center;
4  align-items: center;
5  min-height: 100vh;
6  width: 100%;
7}

htmlCopy
<!-- Tailwind -->
<div class="flex justify-center items-center min-h-screen w-full">
  <div class="p-8 bg-white rounded shadow">Hero Content</div>
</div>

Centering Only Horizontally (Common Mistake Zone)

cssCopy
1/* This centers horizontally but does NOT center vertically */
2.horizontal-only {
3  display: flex;
4  justify-content: center;
5}
6
7/* For vertical-only centering */
8.vertical-only {
9  display: flex;
10  align-items: center;
11  height: 200px; /* container MUST have height */
12}

⚠️ align-items: center does nothing if the container has no explicit height or min-height. This is the #1 Flexbox centering bug in production.

Flex: Centering One Child Among Many

cssCopy
1.parent {
2  display: flex;
3  align-items: flex-start; /* others align top */
4}
5
6.special-child {
7  align-self: center; /* only THIS child centers vertically */
8}

htmlCopy
1<!-- Tailwind -->
2<div class="flex items-start gap-4">
3  <div>Top aligned</div>
4  <div class="self-center">I'm vertically centered</div>
5  <div>Top aligned</div>
6</div>

CSS Grid Centering: The Precision Tool

One-Liner Grid Center (The Cleanest Method)

cssCopy
.container {
  display: grid;
  place-items: center; /* shorthand for align-items + justify-items */
}

htmlCopy
<!-- Tailwind -->
<div class="grid place-items-center">
  <div>Perfectly centered.</div>
</div>

Full Viewport Grid Center

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

htmlCopy
<!-- Tailwind -->
<div class="grid place-items-center min-h-screen">
  <div>Hero Section</div>
</div>

Grid: Centering a Single Cell in a Multi-Column Layout

cssCopy
1.grid-layout {
2  display: grid;
3  grid-template-columns: repeat(3, 1fr);
4  grid-template-rows: 200px;
5  place-items: center;
6}

htmlCopy
<div class="grid-layout">
  <div>Cell 1 — centered</div>
  <div>Cell 2 — centered</div>
  <div>Cell 3 — centered</div>
</div>

Named Grid Areas + Centering

cssCopy
1.page {
2  display: grid;
3  grid-template-areas:
4    "header"
5    "main"
6    "footer";
7  grid-template-rows: auto 1fr auto;
8  min-height: 100vh;
9}
10
11.main-content {
12  grid-area: main;
13  display: grid;
14  place-items: center;
15}

Head-to-Head Comparison

Browser Support

Flexbox Support

⚠️ gap in Flexbox is not the same as the old grid-gap. Safari added it in 14.1 (2021). If you're targeting older Safari (iOS 14.0 and below), use margin instead.

Grid Support

⚠️ IE11 has a broken, outdated Grid implementation based on the 2011 spec. If IE11 matters to you (it shouldn't in 2025), use the -ms- prefixed syntax or Flexbox fallback.

Safe Cross-Browser Centering Pattern

cssCopy
1/* Flexbox fallback → Grid progressive enhancement */
2.center-safe {
3  /* Flexbox: universal support */
4  display: flex;
5  justify-content: center;
6  align-items: center;
7
8  /* Grid override for modern browsers */
9  @supports (display: grid) {
10    display: grid;
11    place-items: center;
12  }
13}

Performance: What Actually Happens in the Browser

Layout Algorithm Cost

codeCopy
Browser Rendering Pipeline:
Parse HTML → Style → Layout → Paint → Composite
                       ↑
              Flexbox & Grid live here

• Flexbox resolves sizes linearly — it iterates over children on a single axis. Cost: O(n) in most cases.
• Grid resolves sizes in a 2D track system first, then places items. For complex grids with auto-placement, this is more expensive — but amortized across the layout, it's negligible unless you're creating >500 grid items dynamically.

Forced Reflow Triggers

javascriptCopy
1// BOTH of these force synchronous layout (avoid in animation loops)
2element.style.display = 'flex';    // triggers layout
3element.style.display = 'grid';    // triggers layout
4
5// Safe: use CSS classes instead
6element.classList.add('is-centered'); // batched by browser

Animating Centered Elements

cssCopy
1/* ✅ GPU composited — no layout cost */
2.box {
3  transform: translateX(0);
4  opacity: 1;
5  transition: transform 300ms ease, opacity 300ms ease;
6}
7
8/* ❌ Triggers layout on every frame */
9.box {
10  transition: width 300ms ease, height 300ms ease;
11}

cssCopy
1/* If you need to animate a centered modal into view */
2.modal-wrapper {
3  display: grid;
4  place-items: center;
5  position: fixed;
6  inset: 0;
7}
8
9.modal {
10  transform: scale(0.95);
11  opacity: 0;
12  transition: transform 200ms ease, opacity 200ms ease;
13}
14
15.modal.is-open {
16  transform: scale(1);
17  opacity: 1;
18}

Real-World Decision Matrix

The margin: auto Method (Often Overlooked)

cssCopy
/* Inside a flex or grid container */
.child {
  margin: auto; /* absorbs all available space on all sides */
}

htmlCopy
<div class="flex h-64">
  <div class="m-auto bg-blue-500 p-4">Centered via margin auto</div>
</div>

The Absolute Positioning Option (When Layout Fails You)

cssCopy
1.overlay {
2  position: fixed;
3  inset: 0; /* top: 0; right: 0; bottom: 0; left: 0 */
4  display: grid;
5  place-items: center;
6  background: rgba(0, 0, 0, 0.5);
7}

cssCopy
1/* Without Grid — the old way */
2.overlay-old {
3  position: fixed;
4  top: 50%;
5  left: 50%;
6  transform: translate(-50%, -50%);
7}

Tailwind Quick Reference

htmlCopy
1<!-- Flexbox center (both axes) -->
2<div class="flex items-center justify-center">...</div>
3
4<!-- Flexbox center (horizontal only) -->
5<div class="flex justify-center">...</div>
6
7<!-- Flexbox center (vertical only — needs height) -->
8<div class="flex items-center h-64">...</div>
9
10<!-- Grid place-items -->
11<div class="grid place-items-center">...</div>
12
13<!-- Grid place-items + full viewport -->
14<div class="grid place-items-center min-h-screen">...</div>
15
16<!-- Self-centering child in flex parent -->
17<div class="flex">
18  <div class="self-center">Only I am centered</div>
19</div>
20
21<!-- Margin auto centering -->
22<div class="flex h-64">
23  <div class="m-auto">Centered</div>
24</div>

Final Rule

codeCopy
Centering inside a component?      → Flexbox
Centering on a page/layout level?  → Grid
Need the shortest possible code?   → grid + place-items: center
Targeting IE11?                    → Flexbox (or find a new job)