במרכז-על

יש להשתמש בפונקציה 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;
}