Bir öğeyi üst öğesi içinde ortalamak için place-items: center
kullanın.
Önce görüntüleme yöntemi olarak ızgarayı belirtin, ardından aynı öğe üzerine place-items: center
yazın. place-items
, aynı anda hem align-items
hem de justify-items
ayarlamak için kullanılan bir kısaltmadır. center
olarak ayarlandığında hem align-items
hem de justify-items
center
olarak ayarlanır.
.parent {
display: grid;
place-items: center;
}
Bu, içeriğin asıl boyutundan bağımsız olarak üst öğede mükemmel bir şekilde ortalanmasını sağlar.
HTML
<div class="parent">
<div class="box" contenteditable="">
:)
</div>
</div>
CSS
.parent {
display: grid;
place-items: center;
/* Just for parent demo size */
height: 100vh;
}