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.

Join the discussionCome work with us
Share on Twitter
Bookmark this page
Ask a questionImprove this Answer

Related Answers

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

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