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