How to center a div: every method, and when to use it

To center a div in CSS, make its parent a flex container and add two lines: justify-content: center and align-items: center. That centers the div horizontally and vertically, and it is the right answer most of the time. Grid, margin: auto, text-align and absolute positioning also work, and each one wins in a specific situation.

Centering a div is the oldest joke in web development. Everyone has searched for it, and everyone has searched for it again a month later. The joke has an honest origin: for years CSS had no good way to do it, so we collected hacks. Flexbox and Grid retired most of them. This guide covers the methods that still matter, what each one actually centers, and ends with a table so you can stop searching.

Set up the parent first

Here is the markup used in every example:

<div class="parent">
  <div class="child">Center me</div>
</div>

.parent {
  min-height: 100vh;
}
 
.child {
  width: 200px;
}

Centering happens inside a parent, and vertical centering needs the parent to be taller than its content. min-height: 100vh makes it as tall as the viewport. Without it, the parent is exactly as tall as the child, so there is nothing to center within, and your perfectly good CSS will appear to do nothing. If a method is not working, check the parent's height before anything else.

Method 1: Flexbox (the default answer)

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

display: flex makes the parent a flex container, and its children are laid out along a main axis, horizontal by default. justify-content positions items along the main axis, and align-items positions them along the cross axis. That is the whole trick, plus remembering which property is which. Almost everyone gets them backwards at least once. The Justify Content (opens in a new tab) and Align Items (opens in a new tab) lessons in CSS Basics take one property each and let you move things around until it sticks.

The catch is that the axes swap when you set flex-direction: column. Then justify-content is vertical and align-items is horizontal. If something is centered the wrong way, check the direction first.

Use it when: you are centering anything inside a container: cards, modals, hero sections, icon buttons. If Flexbox is new, start with the What Is Flexbox (opens in a new tab) lesson.

Method 2: Grid and place-items

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

place-items is shorthand for align-items and justify-items, so one property handles both directions. It looks like cheating, and it is allowed.

If your grid has several tracks and you want to center the whole group inside the container, use place-content: center instead. place-items centers items inside their cells, while place-content moves the grid itself.

Use it when: you have one thing to center and want the shortest CSS, or you are already using Grid. The Grid Vs Flex (opens in a new tab) lesson helps you choose when both would work, and our Flexbox vs Grid guide covers the same decision for whole layouts.

Method 3: margin: auto

This is the classic horizontal centering, and it needs nothing from the parent:

.child {
  width: 200px;
  margin: 0 auto;
}

auto splits the leftover horizontal space equally between the left and right margins. That only works if the element is narrower than its parent. A block element with no width already fills the parent, so there is no leftover space, and margin: 0 auto appears to do nothing. Give it a width or max-width. The Margin (opens in a new tab) lesson covers how margins work, and our CSS box model guide shows what auto is dividing up.

In a normal block layout, auto margins do not center vertically. Inside a flex or grid container, they do:

.parent {
  display: flex;
}
 
.child {
  margin: auto;
}

The child lands in the middle both ways, which is handy when one child needs centering and the rest of the layout should stay put.

Use it when: you are centering a page container or article column. The usual pattern is max-width: 1100px; margin-inline: auto;.

If you want to practice these on a real page rather than a lone box, these courses build one step by step:

Check out our related courses

Beginner

CSS Basics

Learn modern CSS from the ground up. Build a sleek, dark-themed landing page chapter by chapter, starting with a single styled card and growing into a fully responsive multi-section page.

60 lessons

Instructor

Brad Traversy

4.7

1.7k enrolled

Intermediate

Tailwind CSS Basics

A project-based Tailwind CSS course covering Hello Tailwind, typography, color, borders & spacing, and flexbox layouts.

38 lessons

Instructor

Dennis Ivy

4.5

1.8k enrolled

Beginner

HTML Basics

Learn the basics of HTML and how to build simple web pages.

46 lessons

Instructor

Brad Traversy

4.8

1.8k enrolled

Method 4: text-align: center

This is the most common mistake in the whole topic. text-align: center centers inline content inside a block: text, links, images and inline-block elements. It does not move a block-level div. Set it on the parent and the text inside .child centers while the purple box stays put.

If you make the child display: inline-block, the box itself becomes inline content and does move. That works, and it is also a hint that Flexbox would be simpler.

Use it when: you are centering text, a heading, a link or an image. The Text Properties (opens in a new tab) lesson covers it with the other text properties.

Method 5: Absolute positioning

This is the pre-Flexbox classic. It still earns its place for overlays, badges, spinners and tooltips, anything pinned on top of something else:

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

top: 50% and left: 50% put the child's top-left corner at the center of the parent, so the box hangs off toward the lower right. translate(-50%, -50%) pulls it back by half of its own size, which lands its center on the parent's center. The position: relative on the parent matters, because an absolute child measures itself against the nearest positioned ancestor. Without one, it centers against the whole page. The Absolute Positioning (opens in a new tab) lesson explains that relationship.

The child is now out of normal flow, so the parent will not grow to fit it. Give the parent a height, as in the setup.

Use it when: you are layering something over something else. For ordinary layout, reach for Flexbox or Grid.

Method 6: Tailwind

If your project uses Tailwind, each method is a few classes:

<div class="flex min-h-screen items-center justify-center">
  <div class="w-52">Flexbox</div>
</div>
 
<div class="grid min-h-screen place-items-center">
  <div class="w-52">Grid</div>
</div>
 
<div class="mx-auto w-52">Horizontal only</div>

flex items-center justify-center is the sentence you will type most often. It is the Flexbox method with different spelling. The Justify Content (opens in a new tab) and Align Items (opens in a new tab) lessons cover those classes, and Tailwind CSS vs CSS helps you decide whether to learn it first.

Hacks you can retire

You will still meet these in old Stack Overflow answers. Replace them with Flexbox when you next touch the code:

• display: table-cell with vertical-align: middle. The pre-Flexbox standard, which worked by borrowing table layout.
• line-height equal to the container height. Centers one line of text, then breaks the moment it wraps.
• Negative margins, like margin-top: -50px. Breaks as soon as the box changes size.

Which method should you use?

Why it still isn't centered

Still stuck? Open dev tools and look for a crossed-out declaration. Something with higher specificity is overriding yours.

Where to go from here

Centering was never really hard. CSS just lacked a layout system for years, and Flexbox and Grid are that system. Once the two axes make sense, centering becomes something you do without looking it up, along with spacing, wrapping and most other layout problems. The box model, positioning, Flexbox and Grid all build on each other in CSS Basics (opens in a new tab), and Tailwind CSS Basics (opens in a new tab) covers the same ideas as utility classes.