CSS SNIPPET

  返回

栅格布局实现元素居中  页面布局

在父元素内使用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;
}
效果演示
Centered content.
代码说明
  1. display: grid 启用grid显示。
  2. justify-content: center 将子元素水平居中。
  3. align-items: center 将子元素垂直居中。
浏览器支持

97.3%