一行CSS实现 超级居中:place-items: center

对于第一个“单行”布局,让我们解决所有 CSS 领域中最大的谜团:居中。我想让您知道,使用 place-items: center 会让此操作比您想象的容易。

首先指定 grid 作为 display 方法,然后在同一个元素上写入 place-items: center。place-items 是同时设置 align-items 和 justify-items 的快速方法。通过将其设置为 center , align-items 和 justify-items 都将设置为 center。.

.parent {
  display: grid;
  place-items: center;
}

这使得内容能够在父级内完美居中,而不管内部大小。

一行CSS实现 超级居中:place-items: center

演示:https://1linelayouts.glitch.me/