30 seconds of CSS

  Back to Home

Grid centering  layout

Horizontally and vertically centers a child element within a parent element using grid.

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;
}
Demo
Centered content.
Explanation
  1. display: grid enables grid.
  2. justify-content: center centers the child horizontally.
  3. align-items: center centers the child vertically.
Browser support

97.3%