Bardzo wyśrodkowany

Użyj metody place-items: center, aby wyśrodkować element w obrębie elementu nadrzędnego.

Najpierw określ siatkę jako metodę wyświetlania, a potem wpisz place-items: center w tym samym elemencie. place-items to skrót umożliwiający ustawienie jednocześnie align-items i justify-items. Jeśli ma wartość center, opcje align-items i justify-items mają wartość center.

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

Dzięki temu treści będą idealnie wyśrodkowane w obrębie elementu nadrzędnego, niezależnie od jego rozmiaru.

HTML

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

CSS


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

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