How to Center a div Horizontally in CSS

By the end of this page, you will understand how horizontal centering works in CSS for block elements, why margin: 0 auto; is the usual solution, and when newer layout tools like Flexbox are also useful.

In CSS, a block-level element such as a div normally takes up the full available width of its parent unless you give it a specific width.

If you set a fixed width like 800px, the element becomes narrower than the page on larger screens. At that point, CSS can distribute the remaining horizontal space around the element.

The most common way to center that element horizontally is:

.container {
  width: 800px;
  margin: 0 auto;
}

Here is what this means:

• width: 800px; gives the div a fixed width.
• margin: 0 auto; means:
  • top and bottom margin = 0
  • left and right margin = auto

When left and right margins are both auto, the browser splits the extra horizontal space evenly on both sides. That places the element in the center.

This matters because centering content is one of the most common layout tasks in web development. You use it for:

• page wrappers
• article content areas
• login forms
• cards and panels
• fixed-width sections inside responsive pages

A key detail: this technique works for block elements that have a width smaller than their parent. If the element is still width: 100%, there is no extra space to distribute, so centering will not have any visible effect.

Imagine a shelf that is much wider than a box.

• The box is your div.
• The shelf is the browser window.
• The box has a fixed width of 800px.

If the shelf is wider than the box, there is empty space on both sides. Setting the left and right margins to auto tells the browser:

"Take the extra space and divide it equally on the left and right sides."

That is what makes the box sit in the middle.

If the box were already as wide as the shelf, there would be no leftover space to divide, so centering would not change anything.

The classic syntax is:

selector {
  width: 800px;
  margin-left: auto;
  margin-right: auto;
}

This is often shortened to:

selector {
  width: 800px;
  margin: 0 auto;
}

Basic example

<div class="wrapper">
  This content stays 800px wide and is centered.
</div>

.wrapper {
  width: 800px;
  margin: 0 auto;
  background-color: #f2f2f2;
  padding: 20px;
}

Explanation:

• The div is limited to 800px wide.
• If the page is wider than 800px, the extra space is split between the left and right sides.
• The result is a horizontally centered block.

More responsive version

A fixed width of 800px can overflow on small screens. A safer approach is:

.wrapper {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

This means:

• the element can grow up to 800px
• on smaller screens, it can shrink instead of overflowing
• it still stays centered on larger screens

Full HTML example

<!DOCTYPE html>
<html>
<head>
  <style>
    .wrapper {
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
      background: #e8f0fe;
    }
  </style>
</head>
<body>
  <div class="wrapper">
    Centered content area
  </div>
</body>
</html>

Consider this code:

<div class="box">Hello</div>

.box {
  width: 800px;
  margin: 0 auto;
}

Suppose the browser window is 1200px wide.

Step by step

1. The browser creates the div as a block element.
2. CSS applies width: 800px, so the box becomes exactly 800px wide.
3. The parent container is 1200px wide.
4. That leaves 400px of extra horizontal space.
5. CSS sees margin-left: auto and margin-right: auto.
6. The browser divides the extra 400px equally:
   • 200px on the left
   • 200px on the right
7. The div appears centered.

Visual calculation

Parent width:   1200px
Element width:   800px
Extra space:     400px
Left margin:     200px
Right margin:    200px

If the browser width becomes exactly 800px, there is no extra horizontal space, so the element simply fills that width with no visible centering gap.

If the browser width becomes smaller than 800px, the fixed-width box may overflow unless you use max-width instead of width.

Horizontal centering is used constantly in real websites and applications.

Common examples

• Page containers: keeping article or app content centered instead of stretched across huge screens
• Forms: centering a login or signup panel
• Cards and modals: keeping components visually balanced
• Documentation pages: limiting line length for readability
• Admin dashboards: wrapping main content in a centered layout container

Example: centered page layout

.page {
  max-width: 1200px;
  margin: 0 auto;
}

Example: centered login panel

.login-box {
  width: 360px;
  margin: 40px auto;
}

In both cases, the idea is the same: give the element a controlled width and let automatic horizontal margins place it in the middle.

In real projects, developers usually center layout wrappers rather than random individual elements.

Common pattern: page container

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 16px;
}

Why this pattern is common:

• max-width prevents the content from becoming too wide
• margin: 0 auto centers it
• horizontal padding stops content from touching screen edges on small devices

Common usage in design systems

Many codebases define reusable layout classes such as:

.container-sm { max-width: 640px; margin: 0 auto; }
.container-md { max-width: 800px; margin: 0 auto; }
.container-lg { max-width: 1200px; margin: 0 auto; }

Guarding against small-screen issues

Developers often prefer max-width over fixed width because it avoids horizontal scrolling.

.content {
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
}

This lets the element:

• use the available width on small screens
• stop growing beyond 800px on larger screens
• remain centered

Related pattern: Flexbox centering

In modern codebases, Flexbox is often used when centering needs to apply to children inside a parent container:

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

This is useful when you want layout control over multiple items, but for a single fixed-width block, margin: 0 auto; is usually simpler.

1. Forgetting to set a width or max-width

Broken example:

.box {
  margin: 0 auto;
}

Why it fails:

• A block div usually stretches to fill the available width.
• If it is already full width, there is nothing to center.

Fix:

.box {
  width: 800px;
  margin: 0 auto;
}

2. Using text-align: center to center a block element

Broken example:

.box {
  width: 800px;
  text-align: center;
}

Why it fails:

• text-align: center centers inline content inside the element.
• It does not center the block itself.

3. Using fixed width without considering small screens

Problematic example:

.box {
  width: 800px;
  margin: 0 auto;
}

Why it can be a problem:

• On screens narrower than 800px, the element may overflow.

Safer version:

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

4. Trying to center inline elements with auto margins

Auto margins do not behave the same way on inline elements.

If needed, make the element block-level:

span {
  display: block;
  width: 200px;
  margin: 0 auto;
}

5. Centering the wrong element

Sometimes the child is centered, but the parent is still full width or styled unexpectedly. Always confirm which element should have the width and auto margins.

width vs max-width

Recommended choice

For this problem:

.box {
  max-width: 800px;
  margin: 0 auto;
}

If you truly need a fixed width regardless of screen size, use width: 800px; instead.

/* Classic horizontal centering */
.box {
  width: 800px;
  margin: 0 auto;
}

/* Responsive centered container */
.box {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

Rules to remember

• margin: 0 auto; centers a block element horizontally.
• The element needs a width smaller than its parent.
• text-align: center; centers text/inline content, not the block itself.
• max-width is usually better than fixed width for responsive pages.
• Add horizontal padding if content gets too close to screen edges.

Quick patterns

.container {
  max-width: 800px;
  margin: 0 auto;
}

.container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 16px;
}

Edge case

If the element is already full width, centering has no visible effect because there is no extra horizontal space to distribute.

How do I center a div horizontally in CSS?

Give it a width or max-width, then use:

margin: 0 auto;

Why is margin: auto not working on my div?

Usually because the div is still full width. Set a width or max-width first.

Should I use width or max-width to center a container?

Use max-width in most modern layouts because it works better on small screens.

Does text-align: center center a div?

No. It centers inline content inside the div, not the div itself.

Can Flexbox center a div horizontally?

Yes. If the div is inside a flex parent, you can use:

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

What happens if the screen is smaller than the fixed width?

The element may overflow and cause horizontal scrolling. max-width helps avoid that.

Do auto margins work for inline elements?

Not in the same way. This centering technique is mainly for block-level elements or elements made block-level.

• CSS box model — Helps you understand width, padding, border, and margin together.
• Block vs inline elements — Important for knowing why margin: auto works on some elements and not others.
• Flexbox — A modern layout system for centering and aligning child elements.
• Responsive design — Useful when replacing fixed widths with max-width and flexible layouts.
• Text alignment — Often confused with element centering, but solves a different problem.
• CSS width and max-width — Key to controlling whether elements stay fixed-size or adapt to screen size.