Superzentriert

Mit place-items: center können Sie ein Element innerhalb seines übergeordneten Elements zentrieren.

Geben Sie zuerst Grid als Anzeigemethode an und schreiben Sie dann place-items: center auf dasselbe Element. place-items ist eine Kurzschreibweise, mit der align-items und justify-items gleichzeitig festgelegt werden können. Wenn Sie center festlegen, werden sowohl align-items als auch justify-items auf center gesetzt.

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

Dadurch kann der Inhalt unabhängig von der intrinsischen Größe perfekt innerhalb des übergeordneten Elements zentriert werden.

HTML

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

CSS


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

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