超级居中

使用 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;
}

这样，无论固有大小如何，内容都能在父级完全居中。

HTML

<div class="parent">
  <div class="box" contenteditable="">
    :)
  </div>
</div>

CSS


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

  /* Just for parent demo size */
  height: 100vh;
}