How To Center a Div

The Many Ways to Center a Div

Centering an element inside its parent used to be one of CSS's more vexing challenges. As the language has matured, however, it has given us a variety of robust tools to handle this common layout task. Each approach comes with its own strengths and trade-offs, so it pays to know when to use which.

Horizontal Centering With Auto Margins

One of the oldest tricks in the book is horizontal centering via auto margins. The key is first constraining the element's width — a full-width element can't really be “centered.” Instead of locking in a fixed width, you can use the fit-content value, which makes the element shrink-wrap its content, similar to how height naturally behaves.

Using max-width instead of width is a deliberate choice here. While width locks the element to a specific size, max-width only caps it at that size. When the container becomes narrower than the element's content, the element can still shrink rather than overflow.

With the width constrained, auto margins do their magic. Think of each auto margin as a hungry hippo gobbling up any extra space available. When only margin-left: auto is set, all free space flows to that side. When both left and right margins are set to auto, the two hippos split the extra space equally, forcing the element into the center.

For a more modern syntax, you can use margin-inline: auto. This shorthand sets both margin-left and margin-right simultaneously and enjoys excellent browser support. This method works especially well for centering a single child — say, an image between paragraphs in a blog post — without affecting sibling elements.

Centering as a Flex Container

Flexbox shines when you need fine-grained control over item distribution along a primary axis, and it makes two-axis centering trivial:

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

One of Flexbox's standout advantages is its graceful handling of overflow. Even when children exceed the container's dimensions, the element overflows symmetrically, preventing that lopsided, cut-off look. Flexbox also works seamlessly with multiple children, and you can control how they stack by adjusting flex-direction.

This is arguably the most versatile centering pattern available — a solid jack-of-all-trades that serves as a great default when you're not sure which approach fits best.

Positioned Layout for Floating Elements

Sometimes you need to center an element that sits outside the normal document flow — like a dialog, cookie banner, or prompt floating above the content. This calls for positioned layout.

Combining position: fixed with inset: 0px stretches the element to fill the entire viewport, creating what appears to be an impossible condition: the element can't simultaneously sit 0px from all four edges and maintain a constrained width. The rendering engine resolves this tension by prioritizing the dimension constraints and anchoring the element based on the page's language direction.

But when auto margins enter the picture, everything changes. Instead of anchoring to one edge, the browser distributes the free space on all sides, effectively centering the element both horizontally and vertically. This trick depends on four critical ingredients:

1. Fixed (or absolute) positioning
2. Anchoring to all four edges via inset: 0px
3. Constrained width and height (using explicit values, max-width, or max-height)
4. Auto margins

The same technique can center an element along a single axis. For a cookie banner pinned to the bottom of the viewport, drop the top constraint. With only bottom: 0px and left: 0px / right: 0px, the vertical tension disappears, leaving the element anchored to the bottom while auto margins handle horizontal centering. You can even layer in calc() to ensure a buffer stays between the element and the viewport edges.

Centering Elements Without a Set Size

The positioned-layout trick historically required a predefined size, but what if want to center an element whose dimensions are unknown? You can again pull in fit-content. Instead of a hard width, this value lets the element shrink-wrap its content while auto margins keep it perfectly centered — no transform hacks required. A max-width is optional; without one, the element automatically stays contained within the viewport.

Shifting Slightly Off-Center

There are times when true center isn't quite what you want — maybe a dialog should hover slightly above the midpoint. Two strategies accomplish this off-center positioning.

The offset-constraint method works by breaking the symmetry of the constraints. Instead of the element suspended equidistantly between all four edges, override one side. Setting bottom: 48px — rather than the original 0px — shifts the imaginary boundaries between which the element suspends. Interestingly, the element moves by only half the offset specified: 24px instead of 48px, because the box is re-centered between the adjusted edges.

The transform method uses transform: translateY(-48px) to slide the element upward by the full amount after layout calculations finish. Transforms are applied after all layout work is complete, so they cleanly nudge the element visually. The edge case worth noting: transforms run after layout, so they don't disturb other elements on the page. This leaves the transform property free for later animation triggers — a practical advantage if you plan to animate the element's entrance with a grow or rise effect.

Grid Centering and Its Quirks

When you need to center content both horizontally and vertically, CSS Grid offers an extremely concise solution. By setting display: grid on the container and using the place-content property, you create a single-cell grid where the content sits perfectly in the middle:

Container Width:100%

Container Height:100%

.container {
  display: grid;
  place-content: center;
}

.element

place-content is a shorthand for both justify-content and align-content, applying the same alignment value to both the row and column axes. The outcome is a 1x1 grid whose single cell is anchored at the center of the parent.

When Flexbox Wins Over Grid

While the Grid solution looks nearly identical to the Flexbox one on the surface, the underlying layout algorithm is completely different. In practice, the Grid approach isn't always as straightforward. Consider the problem of percentage widths. When a child element has width: 50% and height: 50%, the two layout modes calculate these sizes differently:

Layout Algorithm:

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

.element {
  width: 50%;
  height: 50%;
}

.element

It may seem strange, but the child inside the Grid container becomes minuscule above, specifically 25% of the container’s size. In Flexbox, the percentage is relative to the parent element (.container), which is the expected behavior. In Grid, however, the percentage is relative to the *grid cell* in which the item is placed—half of the column's width and half of the row's height. Without explicitly setting grid-template-columns or grid-template-rows, the track sizes are automatically determined by their contents, shrinkwrapping around the element.

This produces a circular calculation where the cell starts at the element's natural size, yet the element is then told to shrink to 50% of that cell:

Element width:50%

Element height:50%

.container {
  display: grid;
  place-content: center;
}

.element {
  width: 50%;
  height: 50%;
}

.element

Although you could add extra CSS to fix this, it’s often simpler to stick with Flexbox in these scenarios. CSS Grid introduces more complexity, which may be unnecessary for a basic centering task.

Stacking with Grid Cells

Even with its complications, CSS Grid possesses one centering superpower: you can overlap multiple elements.

If you assign multiple children to the same cell using grid-row and grid-column, you can stack them directly on top of one another. This is a unique feature that's absent from other layout modes.

# of items:1

.container {
  display: grid;
  place-content: center;
}

.element {
  grid-row: 1;
  grid-column: 1;
}

Here's the HTML structure that makes this possible:

<div class="container">
  <img class="element" />
  <img class="element" />
  <img class="element" />
  <img class="element" />
</div>

Unlike Flexbox or Flow layout, these elements don't line up horizontally or vertically. By sharing the same grid cell, they pile up face-to-back. This even works when the siblings have different sizes. The shared cell will always be as wide and tall as the largest child, as visible in the demos with varying media dimensions. To align the contents of the cell correctly, you need to add one additional property: place-items: center. This is a shorthand for justify-items and align-items, controlling item alignment based on their relative sizes.

Without that property, the central positioning breaks down. The items will still sit in a centered cell, but they will anchor to its top-left corner, losing any visual centering:

place-items:

.container {
  display: grid;
  place-content: center;
  place-items: center;
}

.element {
  grid-row: 1;
  grid-column: 1;
}

Reveal Grid

Text Alignment is Separate

Text operates under its own rules in CSS. The centering methods for block containers don't touch individual text characters. Using Flexbox to center a block element won't center the words within it. Instead, the block gets centered, leaving the text left-aligned inside it:

Container Width:100%

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

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

To actually center the characters on each line, use the text-align property:

Container Width:100%

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

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

You can combine text-align with any of the other methods discussed to position the text block itself, as well as its inner content.

On the Horizon: New Flow Alignment

The align-content property has its roots in Flexbox, but it became essential in Grid for controlling track alignment. Normally, this has no effect when using the default Flow layout. That may soon change. In various browser previews, like Chrome Canary and Safari Technical Previews, align-content is being implemented for Flow layout to manage vertical alignment of block elements. This is an experimental feature and not yet widely supported. Note that the demo above is a simulation created using Flexbox to show how future implementations will look.

Selecting the Correct Method

When you face a centering task, choose your approach based on the context, not mere preference.

• For a single element that must not affect the position of any siblings, the Flow layout auto margin strategy works as a simple solution.
• Floating UI components, such as modals or banners, are best handled with the Positioned layout auto margins technique.
• To center a set of elements overlapping each other like a stack, CSS Grid’s cell assignment is the intended tool.
• For centering the characters of text itself, use text-align, which can layer on top of any container-level centering.
• For nearly all other requirements, Flexbox is the most versatile general-purpose choice. It effectively centers one or more children both horizontally and vertically, including cases that require overflow or flexible sizing.