Süper ortalanmış

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