فوق العاده متمرکز

از place-items: center برای قرار دادن یک عنصر در والد آن.

ابتدا grid را به عنوان روش نمایش مشخص کنید و سپس place-items: center همان عنصر بنویسید. place-items کوتاه نویسی برای تنظیم هم align-items و justify-items به طور همزمان است. با تنظیم آن در center ، هم align-items و justify-items در center قرار می گیرند.

.parent {
  display: grid;
  place-items: center;
}

این امکان را فراهم می کند تا محتوا بدون توجه به اندازه ذاتی، کاملاً در مرکز اصلی قرار گیرد.

HTML

<div class="parent">
  <div class="box" contenteditable="">
    :)
  </div>
</div>

CSS

        .parent {
  display: grid;
  place-items: center;

  /* Just for parent demo size */
  height: 100vh;
}