スーパー中央揃え

要素を親内の中央に配置するには、place-items: center を使用します。

まず、表示メソッドとして grid を指定してから、同じ要素に 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;
}