Skip to content
Laviyx Learn

Try

CSS course menu

How to Center in CSS: Horizontally, Vertically and Both

Every way to center things in CSS, and when to use each: text-align for inline content, margin auto for blocks, Flexbox and Grid place-items for both directions, absolute positioning with transform, and centering the whole page.

Intermediate6 min readUpdated
On this page

"How do I center a div?" is one of the most searched CSS questions. The answer depends on what you are centering and in which direction. Here is the toolbox.

Inline content: text-align#

Text, links, images and inline-block elements are centered horizontally inside their block with text-align: center:

CSS
.box { text-align: center; padding: 10px; background: #eef3ff; }
HTML
<div class="box">
  <p>Centered text</p>
  <img src="/lesson-assets/mango.svg" alt="Mango" width="40" height="40">
</div>
Result

A block with a width: margin auto#

CSS
.card { width: 220px; margin: 0 auto; padding: 10px; background: #fff3c4; }
HTML
<div class="card">Centered block</div>
Result

Only horizontal, and the block needs a width (or max-width) smaller than its container.

Both directions: Grid#

The shortest way to center anything both horizontally and vertically:

CSS
.stage {
  display: grid;
  place-items: center;
  height: 160px;
  background: #e6f5f3;
}
.stage div { padding: 12px 18px; background: #0f8a7e; color: white; border-radius: 8px; }
HTML
<div class="stage"><div>Perfectly centered</div></div>
Result

place-items: center is shorthand for align-items: center plus justify-items: center.

Both directions: Flexbox#

CSS
.stage {
  display: flex;
  justify-content: center;   /* main axis: horizontal */
  align-items: center;       /* cross axis: vertical */
  gap: 8px;
  height: 160px;
  background: #fde7c8;
}
.stage span { padding: 10px 14px; background: #e8590c; color: white; border-radius: 6px; }
HTML
<div class="stage"><span>One</span><span>Two</span><span>Three</span></div>
Result

Use Flexbox when several items should sit centered in a row together, as above. With Grid's place-items, several items would stack in separate rows.

Overlays: absolute and transform#

To center an element on top of another, such as a play button over a video thumbnail:

CSS
.thumb {
  position: relative;
  width: 280px;
  height: 160px;
  background: url("/lesson-assets/landscape-600.svg") center / cover;
}
.play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border: none;
  border-radius: 50%;
  background: rgb(0 0 0 / 0.65);
  color: white;
  font-size: 22px;
}
HTML
<div class="thumb"><button class="play" type="button" aria-label="Play video">▶</button></div>
Result

top: 50%; left: 50% moves the button's top-left corner to the centre; translate(-50%, -50%) then shifts it back by half its own size. Alternatively, inset: 0; margin: auto; centers an absolute element that has a fixed width and height.

Centering a whole page section#

To center content in the visible screen, give the container the screen's height:

CSS
.hero {
  min-height: 100dvh;
  display: grid;
  place-items: center;
}

Cheat sheet#

WhatHow
Text and inline content, horizontallytext-align: center on the parent
A block with a width, horizontallymargin-inline: auto
One thing, both directionsParent: display: grid; place-items: center
Several things in a row, both directionsParent: display: flex; justify-content: center; align-items: center
One line of text, vertically in a fixed-height boxGrid or Flexbox on the box (or line-height equal to the height)
On top of something elseposition: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)

Practice#

Practice exercise

Make a 300 × 200 "empty cart" panel with a light grey background whose message and button are centered both ways and stacked vertically with 8px between them.

Show solution
CSS
.empty {
  width: 300px;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  background: #f1f3f5;
  border-radius: 10px;
}
.empty p { margin: 0; }
HTML
<div class="empty">
  <p>Your cart is empty.</p>
  <button type="button">Browse courses</button>
</div>
Result

Key takeaway#

Finished this lesson?

Related lessons

CSSCSS Flexbox: A Complete Beginner's Guide with ExamplesLearn CSS Flexbox with live examples: flex containers and items, flex-direction, main and cross axes, justify-content, align-items, flex-wrap, gap, align-content, and common layouts such as navbars, card rows and sticky footers.Intermediate7 min readCSSCSS Grid Layout: A Complete Beginner's Guide with ExamplesLearn CSS Grid with live examples: grid containers, grid-template-columns and rows, the fr unit, repeat(), gap, minmax(), auto-fit and auto-fill for responsive grids without media queries, spanning cells, and aligning grid items.Intermediate6 min readCSSCSS position: static, relative, absolute, fixed and sticky ExplainedLearn CSS positioning with live examples: static, relative, absolute (and the containing block), fixed and sticky, the top, right, bottom, left and inset properties, and common patterns such as badges, overlays and sticky headers.Intermediate8 min read