Gunakan place-items: center
untuk memusatkan elemen dalam induknya.
Pertama, tentukan petak sebagai metode tampilan, lalu tulis place-items: center
pada elemen yang sama. place-items
adalah singkatan untuk menetapkan align-items
dan justify-items
sekaligus. Dengan menyetelnya ke center
, align-items
dan justify-items
disetel ke center
.
.parent {
display: grid;
place-items: center;
}
Hal ini memungkinkan konten dipusatkan secara sempurna di dalam induk, terlepas dari ukuran intrinsik.
HTML
<div class="parent">
<div class="box" contenteditable="">
:)
</div>
</div>
CSS
.parent {
display: grid;
place-items: center;
/* Just for parent demo size */
height: 100vh;
}