Use place-items: center
para centralizar um elemento no pai.
Primeiro, especifique a grade como o método de exibição e escreva place-items: center
no mesmo elemento. place-items
é uma abreviação para definir align-items
e justify-items
de uma só vez. Ao defini-lo como center
, align-items
e justify-items
serão definidos como center
.
.parent {
display: grid;
place-items: center;
}
Isso permite que o conteúdo fique perfeitamente centralizado no pai, independentemente do tamanho 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;
}