CSS 布局 网格居中

使用grid在父元素内水平和垂直居中放置子元素。

HTML

<div class="grid-centering">
  <div class="child">Centered content.</div>
</div>

CSS

.grid-centering {
  display: grid;
  justify-content: center;
  align-items: center;
}

说明

1. display: grid 启用网格。
2. justify-content: center 将子元素水平居中。
3. align-items: center 将子元素垂直居中。