توسيط للغاية

استخدِم place-items: center لتوسيط عنصر داخل العنصر الرئيسي.

يجب أولاً تحديد الشبكة باعتبارها طريقة العرض، ثم كتابة 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;
}