Muy centrado

Usa place-items: center para centrar un elemento dentro de su elemento superior.

Primero, especifica la cuadrícula como el método de visualización y, luego, escribe place-items: center en el mismo elemento. place-items es una abreviatura para establecer align-items y justify-items a la vez. Si lo estableces en center, align-items y justify-items se configurarán como center.

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

Esto permite que el contenido se centre perfectamente dentro del elemento superior, independientemente del tamaño 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;
}