המרכז המושלם

ב-CSS, השגת "מרכז מושלם" — מיקום של רכיב במרכז, הן אופקית והן אנכית, בתוך רכיב האב שלו — היא אתגר נפוץ בעיצוב פריסות. Flexbox מספק פתרון אלגנטי ופשוט לבעיה הזו. בשילוב המאפיינים justify-content ו-align-items, אפשר למרכז בקלות רכיב ילד בתוך מכל Flex שלו, ללא קשר לגודל של רכיב הילד או של רכיב האב. 

כך אפשר להגיע למרכוז מושלם באמצעות Flexbox:

.container {
    display: flex; /* הפכו את אלמנט האב למכל flex */
    justify-content: center; /* מרכזו את אלמנט הבן אופקית לאורך הציר הראשי */
    align-items: center; /* מרכזו את אלמנט הבן אנכית לאורך הציר המשני */
}

כדי שהטכניקה הזאת תפעל ביעילות, ודאו שלמכל הגמיש יש גובה מוגדר. אם הגובה של המכל לא מוגדר במפורש, הוא יהיה גבוה רק במידה הנדרשת לתוכן שלו, וייתכן שמרכוז אנכי לא יהיה ניכר.

הנה דוגמה לשימוש בטכניקה הזאת ב-HTML:

<div class="container">
    <div class="child">This is centered</div>
</div>

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px; /* הגדר גובה מסוים למכל */
    border: 1px solid black; /* אופציונלי: הוסף מסגרת להמחשה */
}

.child {
    padding: 20px;
    border: 1px solid red;
}

בדוגמה הזו, הגובה של האלמנט .container הוא 300px, והאלמנט .child יהיה ממורכז בדיוק בתוכו הן אופקית והן אנכית.