Super centrata

Usa place-items: center per centrare un elemento all'interno del relativo elemento principale.

Prima specifica griglia come metodo di visualizzazione, quindi scrivi place-items: center sullo stesso elemento. place-items è un modo rapido per impostare sia align-items che justify-items contemporaneamente. Se lo imposti su center, sia align-items che justify-items vengono impostati su center.

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

Ciò consente ai contenuti di essere perfettamente centrati all'interno del file principale, indipendentemente dalle dimensioni intrinseche.

HTML

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

CSS

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

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