Sentry Answers>CSS>

How to align a div to the middle (horizontally / width) of the page?

How to align a div to the middle (horizontally / width) of the page?

Matthew C.

The ProblemJump To Solution

You have a div element that you want to center horizontally in the middle of a page. For example, you want to center a div with a class of “item” horizontally in another div with a class of “container” that is the width of the page:

Click to Copy
<body> <div class="container"> <div class="item">horizontally centered</div> </div> </body>

How do you do this?

The Solution

One way to do this is to use Flexbox and center the div item horizontally using the justify-content CSS property:

Click to Copy
.container { display: flex; justify-content: center; } .item { width: 100px; }

Alternatively, you can set the horizontal margin of the div item to auto:

Click to Copy
.item { width: 100px; margin: 0 auto; }

When the margin is set to auto, the browser determines what margin to use. In this case, it centers the div.

  • Syntax.fmHasty Treat - CSS Grid Masonry (Grid Level 3)
  • Syntax.fmHasty Treat - CSS Grid Level 2 aka Subgrid
  • logo
    Listen to the Syntax Podcast

    Tasty treats for web developers brought to you by Sentry. Get tips and tricks from Wes Bos and Scott Tolinski.


Loved by over 4 million developers and more than 100,000 organizations worldwide, Sentry provides code-level observability to many of the world’s best-known companies like Disney, Peloton, Cloudflare, Eventbrite, Slack, Supercell, and Rockstar Games. Each month we process billions of exceptions from the most popular products on the internet.

© 2024 • Sentry is a registered Trademark
of Functional Software, Inc.