Super centered

Use place-items: center to center an element within its parent.

First specify grid as the display method, and then write place-items: center on the same element. place-items is a shorthand to set both align-items and justify-items at once. By setting it to center, both align-items and justify-items are set to center.

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

This enables the content to be perfectly centered within the parent, regardless of intrinsic size.

HTML

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

CSS


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

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