Horizontally and vertically centers a child element within a parent element using grid
.
display: grid
creates a grid layoutjustify-content: center
centers the child horizontally.align-items: center
centers the child vertically.
预览
Centered content.
HTML
<div class="grid-centering">
<div class="child">Centered content.</div>
</div>
CSS
.grid-centering {
display: grid;
justify-content: center;
align-items: center;
height: 100px;
}