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.
- Syntax.fmHasty Treat - CSS Grid Masonry (Grid Level 3) (opens in a new tab)
- Syntax.fmListen to the Syntax Podcast (opens in a new tab)
- Syntax.fmHasty Treat - CSS Grid Level 2 aka Subgrid (opens in a new tab)
- Listen to the Syntax Podcast (opens in a new tab)
![Syntax.fm logo]()
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.