Sangat terpusat

Gunakan place-items: center untuk memusatkan elemen dalam induknya.

Pertama, tentukan petak sebagai metode tampilan, lalu tulis place-items: center pada elemen yang sama. place-items adalah singkatan untuk menetapkan align-items dan justify-items sekaligus. Dengan menyetelnya ke center, align-items dan justify-items disetel ke center.

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

Hal ini memungkinkan konten dipusatkan secara sempurna di dalam induk, terlepas dari ukuran intrinsik.

HTML

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

CSS


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

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