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 Problem

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.fmListen to the Syntax Podcast
  • Syntax.fmHasty Treat - CSS Grid Level 2 aka Subgrid
  • Syntax.fm 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.

    SEE EPISODES

Considered “not bad” by 4 million developers and more than 150,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.

learn more about sentryjoin our discord