How to Center a Div in CSS: 5 Modern Methods That Actually Work

How to Center a Div in CSS: The Problem That Never Gets Old

If you have ever written CSS, you have probably spent more time than you would like to admit trying to center a div. It is one of the most searched questions in web development, and for good reason. Centering elements, especially both horizontally and vertically, used to be genuinely painful.

The good news? In 2026, we have multiple clean and reliable ways to center a div in CSS. No hacks. No guesswork. Just solid, modern techniques you can copy, paste, and use right away.

In this guide, we cover five proven methods to center a div horizontally, vertically, or both. Each method includes ready-to-use code snippets, a quick explanation of when to use it, and notes on browser support.

Quick Reference Table: 5 Ways to Center a Div in CSS

Before we dive into the details, here is a side-by-side comparison of all five methods:

Method	Horizontal	Vertical	Both	Best For
Flexbox	Yes	Yes	Yes	Most situations, layouts with multiple children
CSS Grid	Yes	Yes	Yes	Simple one-liner centering, grid-based layouts
margin: auto	Yes	No*	No*	Horizontal centering of block elements
position: absolute + transform	Yes	Yes	Yes	Overlays, modals, elements outside normal flow
margin: auto on Grid/Flex child	Yes	Yes	Yes	Centering a single child inside a flex or grid container

*margin: auto alone only handles horizontal centering in normal document flow. Combined with Flexbox or Grid, it handles both axes.

Method 1: Center a Div with Flexbox (Most Popular)

Flexbox is the go-to solution for centering in modern CSS. It is intuitive, well-supported, and works for both horizontal and vertical centering with just three lines of code on the parent element.

Center Horizontally and Vertically with Flexbox

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* or any defined height */
}

That is it. The child div inside .parent will be perfectly centered both horizontally and vertically.

How It Works

• display: flex turns the parent into a flex container.
• justify-content: center centers the child along the main axis (horizontal by default).
• align-items: center centers the child along the cross axis (vertical by default).

Center Only Horizontally with Flexbox

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

Center Only Vertically with Flexbox

.parent {
  display: flex;
  align-items: center;
  height: 100vh;
}

When to use Flexbox centering: This is the method we recommend for most use cases. It works great when you have one or more children that need to be centered, and it does not require you to know the size of the child element.

Method 2: Center a Div with CSS Grid (The One-Liner)

CSS Grid offers arguably the shortest and most elegant solution to center a div. If Flexbox is the workhorse, Grid’s place-items is the shortcut everyone should know.

Center Horizontally and Vertically with Grid

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

One property. That is all it takes. The place-items: center shorthand sets both align-items and justify-items to center simultaneously.

Alternative Grid Syntax

If you prefer to be explicit:

.parent {
  display: grid;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

When to use Grid centering: This is perfect when you want the absolute minimum amount of code. It is also the natural choice if you are already using CSS Grid for your page layout.

Method 3: Center a Div with margin: auto

This is the classic technique and still one of the most useful for horizontal centering of block-level elements. If you just need to center a div horizontally within its parent, margin: auto is simple and reliable.

Horizontal Centering with margin: auto

.child {
  width: 300px; /* a defined width is required */
  margin-left: auto;
  margin-right: auto;
}

Or the shorthand version:

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

How It Works

When you set both margin-left and margin-right to auto, the browser distributes the remaining horizontal space equally on both sides of the element. This pushes the div to the exact center.

Important: The child element must have a defined width. Without a width, the block element will stretch to fill its parent, and there will be no leftover space for the auto margins to distribute.

Can You Use margin: auto for Vertical Centering?

In normal document flow, margin: auto does not work for vertical centering. The top and bottom auto margins simply resolve to zero. However, if the parent is a flex container or a grid container, then margin: auto on the child works on both axes:

.parent {
  display: flex;
  height: 100vh;
}

.child {
  margin: auto;
}

This brings us to Method 5, which we cover below.

When to use margin: auto: Use this when you only need horizontal centering for a block element with a known width. It is the simplest approach and works everywhere.

Method 4: Center a Div with position: absolute and transform

Before Flexbox and Grid became widespread, this was the go-to technique for centering a div both horizontally and vertically. It still has valid use cases today, especially for modals, popups, and overlay elements.

Center Horizontally and Vertically with Absolute Positioning

.parent {
  position: relative;
}

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

How It Works

1. position: absolute removes the child from the normal document flow and positions it relative to the nearest positioned ancestor.
2. top: 50% and left: 50% move the top-left corner of the child to the exact center of the parent.
3. transform: translate(-50%, -50%) shifts the child back by half its own width and height, so the center of the child aligns with the center of the parent.

Center Only Horizontally

.child {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

Center Only Vertically

.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

When to use this method: This approach is ideal when the element needs to be taken out of the normal flow. Think modals, tooltips, centered overlays, or any scenario where the centered element should not affect the layout of its siblings. For standard layout centering, Flexbox or Grid are usually cleaner choices.

Method 5: Center a Div with margin: auto Inside Flex or Grid

This is a lesser-known but powerful technique. When a child element lives inside a flex or grid container, setting margin: auto on the child causes it to absorb all available space equally on every side, centering it both horizontally and vertically.

Flexbox + margin: auto

.parent {
  display: flex;
  height: 100vh;
}

.child {
  margin: auto;
}

Grid + margin: auto

.parent {
  display: grid;
  height: 100vh;
}

.child {
  margin: auto;
}

Both produce the same result: the child is perfectly centered.

When to use this method: This is a great alternative when you want to apply the centering logic to the child rather than the parent. It is especially useful when the parent already has display: flex or display: grid for other layout reasons and you want a specific child to center itself.

How to Center Text Inside a Div

Centering text is slightly different from centering a div inside another div, but it comes up just as often.

Horizontal Text Centering

.box {
  text-align: center;
}

Vertical and Horizontal Text Centering

For a single line of text, you can use line-height:

.box {
  text-align: center;
  height: 200px;
  line-height: 200px;
}

For multi-line text or a more robust approach, use Flexbox:

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

How to Center a Button in a Div

Buttons are inline-level elements by default, so you have a couple of simple options:

• Option A: Use text-align: center on the parent div.
• Option B: Make the button a block element and use margin: 0 auto.
• Option C: Use Flexbox on the parent with justify-content: center.

/* Option A */
.parent {
  text-align: center;
}

/* Option B */
button {
  display: block;
  margin: 0 auto;
}

/* Option C */
.parent {
  display: flex;
  justify-content: center;
}

How to Center an Image in a Div

Images behave like inline elements by default. To center an image horizontally inside a div:

/* Simple approach */
.parent {
  text-align: center;
}

/* Flexbox approach */
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Block + margin approach */
img {
  display: block;
  margin: 0 auto;
}

Which Method Should You Use? Our Recommendation

With five solid methods available, it can be hard to know which one to pick. Here is our straightforward advice:

• Default choice: Use Flexbox (Method 1). It is versatile, readable, and handles both axes with ease.
• Shortest code: Use CSS Grid with place-items: center (Method 2) when you want a quick one-liner.
• Horizontal only: Use margin: 0 auto (Method 3) for simple block-level horizontal centering.
• Overlays and modals: Use position: absolute + transform (Method 4) when the element needs to be outside normal flow.
• Child-level control: Use margin: auto inside a flex/grid parent (Method 5) when you want the child to manage its own centering.

All five methods have excellent browser support in 2026. Every modern browser, including mobile browsers, fully supports Flexbox and Grid. There is no reason to rely on outdated float-based hacks or table-cell tricks anymore.

Common Mistakes When Centering a Div

Even with the right technique, a few common pitfalls can trip you up:

1. Forgetting to set a height on the parent. Vertical centering requires the parent to have a defined height. If the parent has no height (or its height is determined solely by its content), the child is already at the “center” because there is no extra space. Set height: 100vh or another explicit value.
2. Using margin: auto without a width. For the classic margin: 0 auto to work, the child element needs a defined width. Otherwise, it stretches to fill the parent.
3. Confusing text-align: center with element centering. The text-align: center property centers inline content (text, images, inline elements) but does not center block-level divs.
4. Not setting position: relative on the parent. When using position: absolute on the child, the parent must have position: relative (or another positioning context). Otherwise, the child will position itself relative to the viewport or a higher ancestor.

FAQ: Centering a Div in CSS

How do I center a div in CSS without Flexbox?

You can use margin: 0 auto for horizontal centering (the child needs a defined width). For both horizontal and vertical centering without Flexbox, use position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); on the child, and make sure the parent has position: relative.

What is the easiest way to center a div vertically and horizontally?

The easiest way is CSS Grid with a single property:

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

Does margin: auto work for vertical centering?

Not in normal document flow. However, if the parent is a flex or grid container, margin: auto on the child will center it on both axes.

How do I center a div inside another div?

Apply display: flex; justify-content: center; align-items: center; to the outer div. The inner div will be centered both horizontally and vertically. Make sure the outer div has a defined height.

Can I center a div without knowing its width or height?

Yes. Both the Flexbox method and the CSS Grid method center elements regardless of their dimensions. The position: absolute + transform method also works without knowing the element’s size, because translate(-50%, -50%) is relative to the element’s own dimensions.

Is Flexbox or Grid better for centering?

Both are excellent. For pure centering, Grid offers slightly shorter code (place-items: center). Flexbox is more versatile if you also need to control spacing, ordering, or alignment of multiple children. In practice, either one is a great choice.

Wrapping Up

Centering a div in CSS does not have to be frustrating. With Flexbox, Grid, margin: auto, absolute positioning, and the margin: auto flex/grid hybrid, you have five dependable tools at your disposal. Bookmark this page, copy the snippets you need, and never wrestle with centering again.