CSS一句代码快速搞定超级居中

技术 · 01-11 · 281 人浏览

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。

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


超级居中实际效果

css超级居中.gif

CSS