How to Center a Div in CSS (5 Ways That Actually Work)

The Fastest Way to Center a Div

To center a <div> horizontally and vertically, give its parent three lines: display: flex, justify-content: center, and align-items: center. The parent also needs usable height if you want to see vertical movement. Flexbox is a sensible default for one item or one group, but the correct method depends on what “center” means in this layout.

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

There are no fixed child dimensions or negative margins here. Add min-height: 100vh when the parent should be at least as tall as the viewport. If the parent is only as tall as its contents, there is no spare vertical space to distribute. CSS is being literal, which is one of its less charming but more useful habits.

What Exactly Are You Centering?

“Center a div” can describe several different jobs. Choose by target and layout context before choosing a property.

That item-versus-group distinction is the useful part. place-items, place-self, and place-content sound like a committee named them during a long afternoon, but they control three different alignment targets.

Method 1: margin: 0 auto in Normal Flow

Use auto inline margins when a block should sit in the horizontal middle of its containing block.

.box {
  width: 600px;
  max-width: 100%;
  margin: 0 auto;
}

The browser gives the left and right auto margins equal used values. The key condition is free inline space. An ordinary block with width: auto fills the available width, so its auto side margins resolve to zero and nothing appears to move. An explicit width is one way to create that space; the 600px width plus max-width: 100% above also keeps the box inside a narrower parent.

This is a sizing rule, not a centering incantation. The CSS box model explains how content, padding, borders, and margins contribute to the result. The W3C’s CSS 2.2 block-width rules specify both the width: auto behavior and the equal auto margins.

In normal block flow, margin: 0 auto centers horizontally, not vertically. Flex and Grid change the context: their auto margins can absorb free space in the corresponding dimension. For example, this centers the child on both axes without adding alignment properties:

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

.child {
  margin: auto;
}

Method 2: text-align: center for Inline Content

Use text-align for text, images, or an inline or inline-block element. Set it on the parent.

.parent {
  text-align: center;
}

The property aligns inline-level content along the inline axis when that content does not fill the line box, as the CSS Text specification defines it. It does not center a block-level child with a set width. For that block, use auto margins or change the layout context to Flexbox or Grid. Changing the child to display: inline-block makes it inline-level and therefore affected by the parent’s text-align.

Method 3: Flexbox for Both Axes

Flexbox is the practical default when you want to center one child or a row of children without removing them from normal flow.

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

The W3C Flexbox specification defines justify-content on the main axis and align-items on the cross axis. With the default flex-direction: row, those normally map to horizontal and vertical. Set flex-direction: column, and the main axis becomes vertical, so the physical directions appear to swap. The properties did not swap jobs; the axis moved.

Drop align-items when you only need main-axis centering. Drop justify-content when you only need cross-axis centering. In either case, the container needs leftover space on the relevant axis. A parent that hugs its child cannot visibly distribute space it does not have. For the full property map, use the complete guide to Flexbox.

To center several siblings as one row while keeping a 1rem gap:

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

Method 4: CSS Grid with place-items

Grid offers the shortest two-axis recipe for children inside their grid areas.

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

The CSS Box Alignment specification defines place-items as the shorthand for align-items and justify-items. It sets the default self-alignment behavior of the container’s child boxes. That makes it convenient for a dedicated hero, empty state, or loading-spinner container.

For one grid child, leave the siblings alone and set the shorthand on that item:

.featured-item {
  place-self: center;
}

place-self sets align-self and justify-self for that box. By contrast, place-content: center aligns the grid contents, meaning the track group, inside a container that has extra space. It does not mean “center each item.” The CSS Grid tutorial covers tracks and responsive layouts; this distinction is all you need for choosing the centering property.

Method 5: Absolute Positioning Plus transform

Use positioned centering when the element must sit over other content, such as a modal panel, tooltip, or badge, and its dimensions are unknown.

.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 midpoint of its containing block. The negative translation moves the child back by half its own reference-box width and height. The CSS Transforms specification defines horizontal translation percentages against the reference-box width and vertical percentages against its height.

position: relative on the intended parent is the clearest way to establish the local positioning context. It is not the only property that can establish one. Per CSS Positioned Layout, an absolutely positioned box uses the nearest ancestor that establishes an absolute-position containing block; position, transform, will-change, and contain are among the properties that can do that. If an element jumps somewhere unexpected, inspect its containing block rather than automatically blaming the transform.

Bonus: A Reusable Sass Centering Mixin

If the same Flexbox pattern appears throughout a project, a Sass mixin can package it without changing the generated CSS behavior. The official Sass mixin documentation describes mixins as reusable groups of styles, while the @if documentation defines the conditional branches used here.

@mixin center($direction: both) {
  display: flex;

  @if $direction == both {
    justify-content: center;
    align-items: center;
  } @else if $direction == horizontal {
    justify-content: center;
  } @else if $direction == vertical {
    align-items: center;
  }
}

.hero {
  min-height: 100vh;
  @include center;
}

.toolbar {
  @include center(horizontal);
}

The both, horizontal, and vertical arguments keep the call sites explicit. The mixin is useful when it represents a project convention; for a single selector, the three declarations are clearer than an abstraction.

Why Is the Div Still Not Centered?

Check the constraint before changing the method:

• Vertical centering looks unchanged: the parent has no extra height. Add an appropriate min-height, fixed height, or inherited height.
• Auto margins look unchanged: in normal flow, the block’s used width consumes all available inline space. Preserve a narrower used width.
• The wrong flex direction moves: flex-direction changed the main axis. justify-content follows that axis; align-items follows the cross axis.
• Every grid item moved: place-items was set on the container. Use place-self on the one item that should move.
• The tracks moved but items still stretch: place-content aligned the grid contents. Use place-items or place-self for item alignment.
• The positioned child jumps outside its parent: another ancestor establishes the containing block, or the intended parent does not. Inspect the ancestor chain.
• A full-width child causes horizontal overflow: 100vw follows the viewport, not the child’s containing block, and viewport units are generally sized as though scrollbars do not exist. If the child should follow its container, prefer width: 100%. The exact scrollbar exception depends on root overflow or scrollbar-gutter, as defined in CSS Values and Units.

Which Method Should You Use?

Use this order:

1. For one item or one group on both Flexbox axes, use display: flex, justify-content: center, and align-items: center.
2. For grid items inside their areas, use place-items: center; for one item, use place-self: center.
3. For a narrower normal-flow block horizontally, use margin: 0 auto with a used width that leaves free space.
4. For text or inline-level content, use text-align: center on the parent.
5. For an overlay of unknown size, use absolute positioning with translate(-50%, -50%) and verify its containing block.

The method follows the alignment target, the layout mode, and the available space. Once those three facts are explicit, centering stops being a bag of tricks and becomes a short diagnosis.

Sources

• W3C, CSS Flexible Box Layout Module Level 1 — main-axis, cross-axis, alignment, and flex auto-margin behavior (accessed September 3, 2026).
• W3C, CSS Box Alignment Module Level 3 — place-items, place-self, and place-content semantics (accessed September 3, 2026).
• W3C, CSS Grid Layout Module Level 2 — grid-item alignment and auto margins in Grid (accessed September 3, 2026).
• W3C, CSS 2.2 Visual Formatting Model Details — block widths and equal horizontal auto margins (accessed September 3, 2026).
• W3C, CSS Positioned Layout Module Level 3 and CSS Transforms Module Level 1 — absolute-position containing blocks and percentage translations (accessed September 3, 2026).
• W3C, CSS Text Module Level 3 and CSS Values and Units Module Level 4 — inline-content alignment and viewport-relative units (accessed September 3, 2026).
• Sass, @mixin and @include and @if and @else — reusable style groups and conditional evaluation (accessed September 3, 2026).