Supercentralizado

Use place-items: center para centralizar um elemento no pai.

Primeiro, especifique a grade como o método de exibição e escreva place-items: center no mesmo elemento. place-items é uma abreviação para definir align-items e justify-items de uma só vez. Ao defini-lo como center, align-items e justify-items serão definidos como center.

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

Isso permite que o conteúdo fique perfeitamente centralizado no pai, independentemente do tamanho intrínseco.

HTML

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

CSS


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

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