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:

<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:

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

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

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

Loved by over 4 million developers and more than 90,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.

Share on Twitter
Bookmark this page
Ask a questionJoin the discussion

Related Answers

A better experience for your users. An easier life for your developers.

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