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;
}