Super-centré

Utilisez place-items: center pour centrer un élément dans son parent.

Commencez par spécifier la grille comme méthode d'affichage, puis écrivez place-items: center sur le même élément. place-items est un raccourci permettant de définir à la fois align-items et justify-items. Si vous le définissez sur center, align-items et justify-items sont tous deux définis sur center.

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

Ainsi, le contenu est parfaitement centré dans le parent, quelle que soit la taille intrinsèque.

HTML

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

CSS


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

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