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 , 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.

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

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

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:

 {
  : ;
  :  auto;
}

vs

/* 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;
}

 {
  : ;
  : ;
  :  auto;
  :  ;
}

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 is inside a flex parent, you can use:

• 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.