How to align a div to the middle (horizontally / width) of the page?
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.
More CSS content
- Syntax.fm Hasty Treat - CSS Grid Level 2 aka Subgrid (opens in a new tab)
- Syntax.fm Hasty Treat - CSS Grid Masonry (Grid Level 3) (opens in a new tab)
- Resources What is Distributed Tracing (opens in a new tab)
-
Listen to the Syntax Podcast (opens in a new tab) 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.
