Horizontally and vertically centers a child element within a parent element using grid
.
display: grid
to create a grid layout.justify-content: center
to center the child horizontally.align-items: center
to center the child vertically.<div class="grid-centering">
<div class="child">Centered content.</div>
</div>
.grid-centering {
display: grid;
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 flexbox.
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.