CSS Center a Div 02 / 05

CSS Grid Center a Div

Three CSS Grid centering techniques — place-items shorthand, a 3×3 named template that puts the child at column 2/row 2, and the grid-absorbs-free-space margin:auto pattern.

Pure CSS MIT licensed
Live Demo Open in tab

This is a full-page demo — interact inside the frame above, or open it in the playground for the full-screen experience.

Open in playground

The code

<div class="cd-02">
  <div class="cd-02__header">
    <div class="cd-02__badge">Pure CSS</div>
    <h2>CSS Grid Center a Div</h2>
    <p>Three grid centering techniques — place-items, named template areas, and auto margins</p>
  </div>

  <div class="cd-02__viewport">

    <!-- Demo 1: place-items: center -->
    <div class="cd-02__demo">
      <div class="cd-02__demo-label">
        <span>place-items shorthand</span>
        <code>display:grid; place-items:center</code>
      </div>
      <div class="cd-02__stage cd-02__stage--place">
        <div class="cd-02__dots"></div>
        <div class="cd-02__lines"></div>
        <div class="cd-02__card cd-02__center">
          <h3>Grid Centered</h3>
          <p>Two properties, total control</p>
        </div>
      </div>
    </div>

    <!-- Demo 2: 3-col 3-row template -->
    <div class="cd-02__demo">
      <div class="cd-02__demo-label">
        <span>3-col / 3-row template</span>
        <code>grid-template: 1fr auto 1fr / 1fr auto 1fr</code>
      </div>
      <div class="cd-02__stage cd-02__stage--template">
        <div class="cd-02__dots"></div>
        <div class="cd-02__lines"></div>
        <div class="cd-02__card cd-02__center">
          <h3>Column 2 · Row 2</h3>
          <p>Exact grid placement</p>
        </div>
      </div>
    </div>

    <!-- Demo 3: margin auto inside grid -->
    <div class="cd-02__demo">
      <div class="cd-02__demo-label">
        <span>Auto margins inside grid</span>
        <code>display:grid → margin:auto on child</code>
      </div>
      <div class="cd-02__stage cd-02__stage--margins">
        <div class="cd-02__dots"></div>
        <div class="cd-02__lines"></div>
        <div class="cd-02__card cd-02__center">
          <h3>Margin Auto Magic</h3>
          <p>Grid absorbs free space</p>
        </div>
      </div>
    </div>

  </div>
</div>
.cd-02,.cd-02 *,.cd-02 *::before,.cd-02 *::after{box-sizing:border-box;margin:0;padding:0}
.cd-02 ::selection{background:#f59e0b;color:#000}

.cd-02 {
  --bg: #0c0a00;
  --surface: #151200;
  --border: rgba(245,158,11,.12);
  --accent: #f59e0b;
  --accent2: #fcd34d;
  --text: #fefce8;
  --muted: rgba(254,252,232,.45);
  font-family: 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  min-height: 100vh;
  padding: 40px 24px;
  color: var(--text);
}

.cd-02__header {
  text-align: center;
  margin-bottom: 40px;
}
.cd-02__badge {
  display: inline-flex;
  align-items: center;
  background: rgba(245,158,11,.12);
  border: 1px solid rgba(245,158,11,.3);
  border-radius: 6px;
  padding: 4px 12px;
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent2);
  margin-bottom: 16px;
}
.cd-02__header h2 {
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 700;
  letter-spacing: -.02em;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cd-02__header p {
  margin-top: 8px;
  color: var(--muted);
  font-size: .9rem;
}

.cd-02__viewport {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.cd-02__demo {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
}

.cd-02__demo-label {
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cd-02__demo-label span {
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
}
.cd-02__demo-label code {
  font-size: .78rem;
  background: rgba(245,158,11,.15);
  color: var(--accent2);
  padding: 2px 8px;
  border-radius: 4px;
  font-family: 'Cascadia Code', 'Fira Code', monospace;
}

.cd-02__stage {
  height: 280px;
  position: relative;
}

/* ── Grid center: place-items shorthand ── */
.cd-02__stage--place {
  display: grid;
  place-items: center;
}

/* ── Grid center: named template ── */
.cd-02__stage--template {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: 1fr auto 1fr;
  gap: 0;
}
.cd-02__stage--template .cd-02__center {
  grid-column: 2;
  grid-row: 2;
}

/* ── Grid center: auto margins ── */
.cd-02__stage--margins {
  display: grid;
}
.cd-02__stage--margins .cd-02__center {
  margin: auto;
}

/* ── Cards ── */
.cd-02__card {
  background: linear-gradient(135deg, rgba(245,158,11,.18), rgba(252,211,77,.1));
  border: 1px solid rgba(245,158,11,.3);
  border-radius: 16px;
  padding: 28px 36px;
  text-align: center;
  box-shadow: 0 8px 32px rgba(245,158,11,.12);
  position: relative;
  z-index: 1;
}
.cd-02__card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}
.cd-02__card p {
  font-size: .82rem;
  color: var(--muted);
}

/* ── Dot grid ── */
.cd-02__dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(245,158,11,.18) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

/* ── Grid lines overlay ── */
.cd-02__lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.cd-02__lines::before,
.cd-02__lines::after {
  content: '';
  position: absolute;
  background: rgba(245,158,11,.1);
}
.cd-02__lines::before { width: 1px; height: 100%; left: 50%; }
.cd-02__lines::after  { width: 100%; height: 1px; top: 50%; }

/* ── Grid cell highlight visual ── */
.cd-02__cell-markers {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: 1fr auto 1fr;
}
.cd-02__cell-markers span {
  border: 1px dashed rgba(245,158,11,.08);
}

@media (max-width: 600px) {
  .cd-02__demo-label { flex-direction: column; align-items: flex-start; gap: 6px; }
  .cd-02__stage { height: auto; min-height: 200px; padding: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .cd-02 * { animation: none !important; transition: none !important; }
}

How this works

CSS Grid offers even terser centering than Flexbox: display:grid; place-items:center (a shorthand for align-items + justify-items) is the shortest possible two-property solution. The second stage constructs an explicit grid-template-columns: 1fr auto 1fr; grid-template-rows: 1fr auto 1fr layout — a 3×3 grid where the center cell's auto sizing matches the child's intrinsic width/height — then places the card at grid-column:2; grid-row:2. This pattern is useful when the surrounding cells must hold decorative content or background fills.

The third stage demonstrates that a block-level child inside any grid container can be centered purely via margin:auto: the grid distributes all free space to the auto margins, pulling the element to both centers. A radial dot-grid background is drawn with a two-layer background-image using radial-gradient repeating patterns — no extra markup, pure CSS.

Customize

  • Replace the dot-grid background by changing the radial-gradient color in .cd-02__dots — try rgba(245,158,11,.35) for bolder dots or swap to a line grid with linear-gradient.
  • Demonstrate responsive reflow by giving .cd-02__stage--place a padding:24px and adding a second child — Grid's place-items:center only centers the first child; additional items need explicit place-self overrides.
  • Swap the accent to a cool palette by editing --accent:#f59e0b to any hue — the card gradient, border, and shadow all reference this variable so one change updates the entire demo.
  • Make the 3×3 template demo interactive by adding a CSS :hover state on .cd-02__card that transitions grid-column from 2 to 3 — the card will slide to the right column on hover.
  • Adjust the card corner radius by editing border-radius:16px on .cd-02__card — set to 4px for a sharp editorial feel or 50px for a pill shape.

Watch out for

  • place-items:center stretches every grid child to the center of its grid area, not the container — if you have multiple explicit tracks, items center within their assigned track, not the whole parent.
  • The margin:auto inside grid only works when the child has an explicit or fit-content size; a width:100% child fills its track and auto margins collapse to zero.
  • The 3×3 template approach breaks if the center column/row uses fr units instead of auto — fr distributes remaining space after fixed tracks, so use 1fr auto 1fr precisely.

Browser support

ChromeSafariFirefoxEdge
57+ 10.1+ 52+ 57+

place-items shorthand needs Chrome 59+, Safari 11+; the margin:auto inside grid technique works in any grid-capable browser.

More from CSS Center a Div

CSS Center a Div All MethodsCSS Flexbox Center a DivCSS Absolute Position Center a DivCSS Margin Auto Center a Div
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →