Horizontally and vertically centers a child element within a parent element using flexbox.
display: flex
to create a flexbox layout.justify-content: center
to center the child horizontally.align-items: center
to center the child vertically.<div class="flexbox-centering">
<div>Centered content.</div>
</div>
.flexbox-centering {
display: flex;
justify-content: center;
align-items: center;
height: 100px;
}
Snippet collection
A collection of techniques for centering HTML elements in any situation using CSS.
CSS, Layout
Horizontally and vertically centers a child element within a parent element using grid
.
CSS, Layout
Vertically and horizontally centers a child element within its parent element, using display: table
.
CSS, Layout
Vertically and horizontally centers a child element within its parent element using CSS transforms.