CSS Center a Div 01 / 05

CSS Flexbox Center a Div

Three flex centering patterns showing how display:flex with align-items and justify-content centers a div both horizontally and vertically, as a row, and as a stacked column.

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-01">
  <div class="cd-01__header">
    <div class="cd-01__badge">Pure CSS</div>
    <h2>CSS Flexbox Center a Div</h2>
    <p>Three flex centering patterns — single element, row of cards, and column stack</p>
  </div>

  <div class="cd-01__viewport">

    <!-- Demo 1: flex center both axes -->
    <div class="cd-01__demo">
      <div class="cd-01__demo-label">
        <span>Center both axes</span>
        <code>display:flex; align-items:center; justify-content:center</code>
      </div>
      <div class="cd-01__stage cd-01__stage--flex">
        <div class="cd-01__axis"></div>
        <div class="cd-01__grid-guide"></div>
        <div class="cd-01__card">
          <h3>Perfectly Centered</h3>
          <p>Both axes, one declaration</p>
        </div>
      </div>
    </div>

    <!-- Demo 2: flex row with gap -->
    <div class="cd-01__demo">
      <div class="cd-01__demo-label">
        <span>Row of items centered</span>
        <code>display:flex; justify-content:center; gap:20px</code>
      </div>
      <div class="cd-01__stage cd-01__stage--flex-row">
        <div class="cd-01__axis"></div>
        <div class="cd-01__card cd-01__card--sm">
          <h3>Card One</h3>
          <p>Auto aligned</p>
        </div>
        <div class="cd-01__card cd-01__card--sm">
          <h3>Card Two</h3>
          <p>Equal spacing</p>
        </div>
        <div class="cd-01__card cd-01__card--sm">
          <h3>Card Three</h3>
          <p>Via gap</p>
        </div>
      </div>
    </div>

    <!-- Demo 3: flex column center -->
    <div class="cd-01__demo">
      <div class="cd-01__demo-label">
        <span>Column stack centered</span>
        <code>flex-direction:column; align-items:center</code>
      </div>
      <div class="cd-01__stage cd-01__stage--flex-col">
        <div class="cd-01__axis"></div>
        <div class="cd-01__card">
          <h3>Stacked &amp; Centered</h3>
          <p>Column direction + align-items</p>
        </div>
        <div class="cd-01__pill">Call to Action</div>
      </div>
    </div>

  </div>
</div>
.cd-01,.cd-01 *,.cd-01 *::before,.cd-01 *::after{box-sizing:border-box;margin:0;padding:0}
.cd-01 ::selection{background:#6366f1;color:#fff}

.cd-01 {
  --bg: #0a0a0f;
  --surface: #13131a;
  --border: rgba(255,255,255,.08);
  --accent: #6366f1;
  --accent2: #a78bfa;
  --text: #f1f0ff;
  --muted: rgba(241,240,255,.45);
  font-family: 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  min-height: 100vh;
  padding: 40px 24px;
  color: var(--text);
}

/* ── Label strip ── */
.cd-01__header {
  text-align: center;
  margin-bottom: 40px;
}
.cd-01__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-01__header p {
  margin-top: 8px;
  color: var(--muted);
  font-size: .9rem;
}

/* ── Code badge ── */
.cd-01__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(99,102,241,.12);
  border: 1px solid rgba(99,102,241,.3);
  border-radius: 6px;
  padding: 4px 12px;
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent2);
  margin-bottom: 16px;
}

/* ── Main showcase container ── */
.cd-01__viewport {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* ── Single demo cell ── */
.cd-01__demo {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
}

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

/* ── The actual centering playgrounds ── */
.cd-01__stage {
  height: 260px;
  position: relative;
}

/* Flexbox center both axes */
.cd-01__stage--flex {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Flex row with gap */
.cd-01__stage--flex-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 24px;
}

/* Flex column center */
.cd-01__stage--flex-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

/* ── Cards inside stages ── */
.cd-01__card {
  background: linear-gradient(135deg, rgba(99,102,241,.2), rgba(167,139,250,.15));
  border: 1px solid rgba(99,102,241,.3);
  border-radius: 16px;
  padding: 28px 36px;
  text-align: center;
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(99,102,241,.15);
}
.cd-01__card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}
.cd-01__card p {
  font-size: .82rem;
  color: var(--muted);
}

.cd-01__card--sm {
  padding: 20px 24px;
}
.cd-01__card--sm h3 { font-size: .95rem; }

.cd-01__pill {
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  border-radius: 50px;
  padding: 10px 28px;
  font-size: .85rem;
  font-weight: 600;
  color: #fff;
  box-shadow: 0 4px 20px rgba(99,102,241,.4);
}

/* ── Axis lines overlay ── */
.cd-01__axis {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.cd-01__axis::before,
.cd-01__axis::after {
  content: '';
  position: absolute;
  background: rgba(99,102,241,.12);
}
.cd-01__axis::before {
  width: 1px;
  height: 100%;
  left: 50%;
}
.cd-01__axis::after {
  width: 100%;
  height: 1px;
  top: 50%;
}

/* ── Grid guide ── */
.cd-01__grid-guide {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(99,102,241,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,102,241,.06) 1px, transparent 1px);
  background-size: 40px 40px;
}

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

How this works

Flexbox is the most direct centering tool CSS offers. Setting display:flex on the parent plus align-items:center and justify-content:center pushes any child — regardless of its intrinsic size — to the exact cross-axis and main-axis midpoint. The first stage uses both axes simultaneously; the second switches to a row of cards centered on the main axis with gap for spacing; the third adds flex-direction:column so children stack and align-items:center centers them on the now-horizontal cross axis.

Each stage renders a visible crosshair composed of ::before/::after pseudo-elements on an overlay div so you can see exactly where the axes land. The cards themselves use a semi-transparent background with backdrop-filter:blur and a subtle box-shadow tinted with the accent color — a technique that requires no additional elements and works in all evergreen browsers.

Customize

  • Change the accent color pair by editing --accent:#6366f1 and --accent2:#a78bfa at the .cd-01 root — all gradients, borders, and box-shadows inherit from these two variables.
  • Add more flex children to the row stage by duplicating a .cd-01__card--sm block; the flex-wrap:wrap on the parent will handle overflow at narrow widths automatically.
  • Control the card depth effect by adjusting box-shadow:0 8px 32px rgba(99,102,241,.15) — increase the spread radius or opacity for a more dramatic hover-card illusion.
  • Toggle the crosshair guide lines off in production by setting .cd-01__axis { display:none } — they are purely decorative and serve as alignment aids during development.
  • Swap the column-stack demo to use justify-content:space-between instead of center to push the card and button to opposite ends of the container.

Watch out for

  • align-items:center centers children along the cross axis — in a default row container that is vertical. Confusing it with the main axis (justify-content) is the most common flexbox centering mistake.
  • Adding flex-wrap:wrap to a centering container can produce off-center rows when the last row has fewer items than the others — use justify-content:center alongside wrap, or switch to Grid for symmetric layouts.
  • Flex centering does not account for scrollbar width on Windows; if overflow:auto is added to the flex parent, a visible scrollbar will shift content off-center — compensate with scrollbar-gutter:stable.

Browser support

ChromeSafariFirefoxEdge
21+ 6.1+ 20+ 21+

Flexbox is universally supported in all modern browsers; the gap property for flex containers needs Chrome 84+, Safari 14.1+, and Firefox 63+.

More from CSS Center a Div

CSS Grid Center a DivCSS Absolute Position Center a DivCSS Margin Auto Center a DivCSS Center a Div All Methods
View the full collection →

Search CodeFronts

Loading…

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