Суперцентрированный

Используйте place-items: center чтобы центрировать элемент внутри его родителя.

Сначала укажите сетку в качестве метода отображения, а затем напишите place-items: center на том же элементе. place-items — это сокращение для одновременной установки align-items и justify-items . Если установить его в center , то и align-items , и justify-items будут установлены в center .

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

Это позволяет контенту быть идеально центрированным внутри родительского элемента, независимо от внутреннего размера.

HTML

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

CSS

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

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