Center an element
In this recipe, you will see how to center one box inside another by using flexbox and grid. Centering both horizontally and vertically is simple and straightforward.
Requirements
To place an item into the center of another box horizontally and vertically.
Recipe
Using flexbox
To center a box within another box, first turn the containing box into a flex container by setting its display property to flex. Then set align-items to center for vertical centering (on the block axis) and justify-content to center for horizontal centering (on the inline axis). And that's all it takes to center one box inside another!
HTML
<div class="container">
<div class="item">I am centered!</div>
</div>
CSS
div {
border: solid 3px;
padding: 1em;
max-width: 75%;
}
.container {
display: flex;
align-items: center;
justify-content: center;
height: 8em;
}
We set a height for the container to demonstrate that the inner item is indeed vertically centered within the container.
Result
Instead of applying align-items: center; on the container, you can also vertically center the inner item by setting align-self to center on the inner item itself.
Using grid
Another method you can use for centering one box inside another is to first make the containing box a grid container and then set its place-items property to center to center align its items on both the block and inline axes.
HTML
<div class="container">
<div class="item">I am centered!</div>
</div>
CSS
div {
border: solid 3px;
padding: 1em;
max-width: 75%;
}
.container {
display: grid;
place-items: center;
height: 8em;
}
Result
Instead of applying place-items: center; on the container, you can achieve the same centering by setting place-content: center; on the container or by applying either place-self: center or margin: auto; on the inner item itself.