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