How to Center a div Horizontally in CSS

By the end of this page, you will understand how horizontal centering works for block elements in CSS, especially fixed-width div containers. You will learn the common margin: 0 auto; technique, why it works, when it does not work, and how it is used in real layouts.

In CSS, a div is a block-level element by default. That means it normally takes up the full available width of its parent unless you give it a specific width.

If you set a block element to a fixed width such as 800px, it no longer fills the entire row. That leaves extra horizontal space on the left and right when the browser is wider than 800px.

To center that block horizontally, the usual approach is:

margin-left: auto;
margin-right: auto;

This is commonly written as:

margin: 0 auto;

Here is why it works:

• auto on the left and right margins tells the browser to distribute the remaining horizontal space.
• If both sides are auto, the browser splits the space evenly.
• The result is a centered block element.

This matters because centered containers are used everywhere in web design:

• page wrappers
• blog content areas
• dashboards
• forms
• documentation layouts

A very common pattern is a centered container with either:

• a fixed width like 800px, or
• a responsive max width such as max-width: 800px

For modern layouts, max-width is often more flexible than a hard width, but the centering idea is the same.

Think of the page as a shelf and your div as a box that is 800px wide.

If the shelf is wider than the box, there is empty space on both sides. Setting margin-left: auto and margin-right: auto is like telling the browser:

"Take the leftover space and split it evenly on both sides of the box."

That makes the box sit exactly in the middle.

If the box has no defined width, then it already fills the whole shelf, so there is no leftover space to split. In that case, centering has no visible effect.

The classic solution is:

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

Example HTML:

<div class="container">
  Content goes here
</div>

Full example:

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      width: 800px;
      margin: 0 auto;
      background: #f2f2f2;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    This div stays 800px wide and is centered horizontally.
  </div>
</body>
</html>

What this does

• width: 800px; keeps the element at a fixed width.
• margin: 0 auto; means:
  • top and bottom margin = 0
  • left and right margin = auto
• The browser uses the extra horizontal space equally on both sides.

A more responsive version

In many real projects, this is better:

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

This version means:

• the container can shrink on smaller screens
• it will not grow beyond 800px
• it remains centered

Consider this code:

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

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

Now imagine the browser window is 1200px wide.

Step-by-step

1. The browser sees a block element: .container.
2. Its width is set to 800px.
3. The parent area is 1200px wide.
4. Remaining horizontal space is:

1200px - 800px = 400px

1. Left and right margins are both auto.
2. The browser splits the remaining 400px equally:

left margin = 200px
right margin = 200px

1. The element appears centered.

What if the browser is exactly 800px wide?

There is no extra horizontal space:

800px - 800px = 0px

So the div fills the available width and still appears correctly placed.

What if the browser is smaller than 800px?

With a fixed width: 800px, the element may overflow horizontally. That is why max-width is often safer for responsive layouts.

Horizontal centering of containers is used in many common layouts:

• Website wrappers: keeping the main content centered on large screens
• Blog articles: limiting line length for readability
• Forms: centering login, signup, or checkout sections
• Dashboards: placing a main content column in the middle
• Documentation pages: centering readable content blocks
• Landing pages: keeping hero text and cards aligned inside a centered container

Example:

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

This creates a central layout area while leaving whitespace on both sides on larger screens.

In real projects, developers often center a main layout container rather than centering each element individually.

Common patterns include:

1. App wrapper

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

Used for the main site shell.

2. Content container with padding

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

This avoids content touching the edges on small screens.

3. Utility class

Some codebases create reusable helpers:

.centered {
  margin-left: auto;
  margin-right: auto;
}

Then combine them with width classes.

4. Responsive layout pattern

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

This is one of the most common production patterns because it works on both small and large screens.

5. Framework usage

CSS frameworks often provide built-in container classes that internally use the same idea: a width or max-width plus auto side margins.

Here are common beginner mistakes when trying to center a div.

1. Forgetting to set a width or max-width

Broken example:

.box {
  margin: 0 auto;
}

Why it fails:

• A block div normally takes the full width already.
• If it is already full width, there is no extra horizontal space to distribute.

Fix:

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

2. Using text-align: center on the div itself

Broken idea:

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

Why it fails:

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

3. Applying auto margins to inline elements

Example:

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

Why it fails:

• Inline elements do not behave like block elements for width and margin centering.

Fix:

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

4. Using fixed width without thinking about small screens

Problem:

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

On a phone narrower than 800px, this may overflow.

Better:

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

5. Confusing horizontal centering with vertical centering

margin: 0 auto; centers horizontally, not vertically. Vertical centering usually uses other layout methods such as Flexbox or Grid.

Here are the most useful ways to compare horizontal centering techniques.

width vs max-width

Example comparison

Using fixed width:

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

Using responsive width:

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

In modern websites, the second pattern is usually preferred.

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

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

Rules

• Works for block-level elements
• The element usually needs a width or max-width
• auto left and right margins split extra horizontal space evenly
• text-align: center centers text or inline content, not the block itself

Quick reminders

• margin: 0 auto; = top/bottom 0, left/right auto
• Use max-width for better responsiveness
• Add padding if you want space from screen edges

Common pattern

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

How do I center a div horizontally in CSS?

Use a width or max-width and set left and right margins to auto:

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

Why is margin: 0 auto; not working?

Usually because the element has no width or max-width, so it already fills the available space.

Does text-align: center; center a div?

No. It centers inline content inside a parent element, such as text or inline-block items.

Should I use width or max-width?

For most modern layouts, max-width is better because it is more responsive on small screens.

Can I center any element with auto margins?

It works best for block elements. Inline elements usually need display: block or a different centering method.

What happens on screens smaller than 800px?

With width: 800px, the element may overflow. Using width: 100%; max-width: 800px; avoids that problem.

• CSS box model — Helps you understand width, margin, padding, and how space is calculated.
• Block vs inline elements — Important because margin: auto behaves differently depending on display type.
• Responsive design — Relevant when choosing max-width instead of a fixed width.
• Flexbox — A modern layout system that can also center items horizontally.
• CSS Grid — Another layout system that can position and center elements.
• text-align — Often confused with centering block elements, so it is useful to compare.
• width and max-width — Essential for understanding why a centered container behaves differently on small vs large screens.