תיעוד CSS עם דוגמאות להרצה: מרכוז div

Q: איך ממרכזים div אופקית ואנכית?

הופכים את ההורה ל-grid וממרכזים את התוכן שלו: .parent { display: grid; place-items: center; }. הגרסה של flexbox היא display: flex; justify-content: center; align-items: center;. בשני המקרים ההורה צריך להיות גבוה יותר מה-div.

Q: איך ממרכזים div רק אופקית?

נותנים לו רוחב ו-margin אוטומטי בצדדים: .box { width: 300px; margin: 0 auto; } (או max-width לבלוק רספונסיבי). margin-inline: auto הוא אותו הדבר במאפיינים לוגיים.

Q: מה הדרך הכי קלה למרכז div?

display: grid; place-items: center; על ההורה: שתי הצהרות, שני הצירים, ילד בכל גודל. השתמשו ב-flexbox כשההורה גם מסדר פריטים אחרים בשורה.

Q: איך ממרכזים טקסט בתוך div?

משתמשים ב-text-align: center על ה-div בשביל טקסט ותוכן inline. מרכוז ה-div עצמו ומרכוז הטקסט שבתוכו הן שתי משימות נפרדות.

התשובה הקצרה

כדי למרכז div גם אופקית וגם אנכית בתוך ההורה שלו, הופכים את ההורה ל-grid וממרכזים את התוכן שלו:

.parent {
  display: grid;
  place-items: center;
  min-height: 200px; /* the parent needs room to center in */
}

זה עובד לילד בכל גודל ולא דורש שום דבר על הילד עצמו. למטה יש שש שיטות זו לצד זו. כל תיבה מודדת את עצמה אחרי שהיא מוצגת, ומדפיסה כמה רחוק המרכז שלה ממרכז ההורה:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Six ways to center</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 12px; margin: 8px; }
    .grid-of-demos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
    .stage { height: 130px; background: #e5e7eb; border: 1px solid #9ca3af; }
    .box { width: 100px; padding: 8px; background: #2563eb; color: white; text-align: center; }
    p { margin: 4px 0 0; }

    .flex { display: flex; justify-content: center; align-items: center; }
    .grid { display: grid; place-items: center; }
    .auto { display: flex; }
    .auto .box { margin: auto; }
    .abs { position: relative; }
    .abs .box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
    .inset { position: relative; }
    .inset .box { position: absolute; inset: 0; margin: auto; height: 20px; }
    .content { align-content: center; }
    .content .box { margin-inline: auto; }
  </style>
</head>
<body>
  <div class="grid-of-demos">
    <div><div class="stage flex"><div class="box">flex</div></div><p></p></div>
    <div><div class="stage grid"><div class="box">grid</div></div><p></p></div>
    <div><div class="stage auto"><div class="box">margin: auto</div></div><p></p></div>
    <div><div class="stage abs"><div class="box">absolute</div></div><p></p></div>
    <div><div class="stage inset"><div class="box">inset: 0</div></div><p></p></div>
    <div><div class="stage content"><div class="box">align-content</div></div><p></p></div>
  </div>
  <script>
    document.querySelectorAll('.stage').forEach((stage) => {
      const s = stage.getBoundingClientRect();
      const b = stage.querySelector('.box').getBoundingClientRect();
      const dx = (b.left + b.width / 2) - (s.left + s.width / 2);
      const dy = (b.top + b.height / 2) - (s.top + s.height / 2);
      stage.nextElementSibling.textContent =
        'off center: x ' + Math.round(dx) + 'px, y ' + Math.round(dy) + 'px';
    });
  </script>
</body>
</html>

כל השש מדווחות 0px בשני הצירים (הגבול של 1px סביב הבמה שווה בכל צד, ולכן הוא לא מזיז את המרכז). שנו רוחב או טקסט של תיבה והריצו שוב: השיטות שלא תלויות בגודל קבוע נשארות על 0.

באיזו שיטה להשתמש

שיטה	ממרכזת	הילד צריך גודל קבוע?	הכי מתאימה ל
Grid `place-items: center`	שני הצירים	לא	בחירת ברירת המחדל: ילד אחד בתוך תיבה
Flexbox `justify-content` + `align-items`	שני הצירים	לא	שורה או עמודה של פריטים, ממורכזים כקבוצה
`margin: auto` בהורה flex או grid	שני הצירים	לא	מרכוז פריט אחד כשהאחים שלו מסודרים אחרת
`margin: 0 auto`	רק אופקית	`width` או `max-width`	מכלי עמוד, מאמרים, טפסים בזרימה רגילה
Absolute + `translate(-50%, -50%)`	שני הצירים	לא	שכבות על, תגיות וחלונות מודאליים מעל תוכן אחר
Absolute + `inset: 0; margin: auto`	שני הצירים	כן, רוחב וגובה	דיאלוגים בגודל קבוע
`align-content: center` על בלוק	אנכית	לא	מרכוז אנכי בלי לשנות את ה-display של ההורה

שיטה 1: flexbox

Flexbox ממרכז לאורך שני צירים עם שני מאפיינים. justify-content מטפל בציר הראשי (אופקי בשורה), ו-align-items בציר הניצב:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Center with flexbox</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .parent {
      display: flex;
      justify-content: center; /* horizontal */
      align-items: center;     /* vertical */
      gap: 8px;
      height: 180px;
      background: #e5e7eb;
    }
    .child { padding: 12px 16px; background: #16a34a; color: white; }
  </style>
</head>
<body>
  <div class="parent" id="parent">
    <div class="child">One</div>
    <div class="child">Two</div>
    <div class="child">Three</div>
  </div>
</body>
</html>

עם כמה ילדים, flexbox ממרכז אותם כקבוצה ושומר אותם בשורה. כאן הוא עדיף על grid, שהיה מערם את שלושת הפריטים בעמודה ממורכזת אחת. עמוד ה-justify-content מסביר כל ערך יישור.

שיטה 2: grid

place-items: center הוא קיצור של align-items: center יחד עם justify-items: center. על מכל grid עם ילד יחיד הוא ממרכז את הילד בשני הכיוונים:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Center with grid</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .parent {
      display: grid;
      place-items: center;
      min-height: 180px;
      background: #e5e7eb;
    }
    .card { max-width: 220px; padding: 16px; background: white; border: 2px solid #2563eb; border-radius: 8px; }
  </style>
</head>
<body>
  <div class="parent" id="parent">
    <div class="card" id="card">A card of any size, centered by its parent.</div>
  </div>
</body>
</html>

min-height במקום height מאפשר להורה לגדול אם הכרטיס נעשה גבוה מ-180px, במקום שהכרטיס יגלוש.

שיטה 3: margin: 0 auto (אופקית)

אלמנט block עם רוחב קטן מהמכל שלו אפשר למרכז אופקית עם margin אוטומטי בצדדים. הדפדפן מחלק את המקום הפנוי שווה בשווה בין שני הצדדים:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>margin auto</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 0; }
    .page {
      max-width: 360px;
      margin: 0 auto;          /* same as margin-inline: auto */
      padding: 16px;
      background: #fef3c7; border: 2px solid #f59e0b;
    }
    .no-width { margin: 12px auto 0; padding: 16px; background: #fee2e2; border: 2px solid #dc2626; }
  </style>
</head>
<body>
  <div class="page" id="page">max-width: 360px and margin: 0 auto</div>
  <div class="no-width" id="nowidth">margin: auto without a width: nothing to center</div>
</body>
</html>

התיבה השנייה ממלאת את כל הרוחב, כך שאין מקום פנוי ושום דבר לא זז. זו הסיבה הרגילה לכך ש-margin: 0 auto "לא עובד". הוא גם ממרכז רק אופקית בזרימה רגילה; margin אנכי auto הופך שם ל-0. אבל בתוך הורה flex או grid, margin: auto ממרכז בשני הכיוונים, וזו התיבה השלישית בהשוואה שלמעלה.

שיטה 4: מיקום absolute ו-transform

כשהאלמנט חייב לשבת מעל תוכן אחר (תגית על תמונה, חלון מודאלי מעל העמוד), מקמו אותו באופן absolute ב-50% ומשכו אותו אחורה בחצי מהגודל שלו עצמו:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Absolute centering</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .photo {
      position: relative;      /* the reference box */
      height: 180px;
      background: linear-gradient(135deg, #bfdbfe, #1e3a8a);
    }
    .play {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 12px 20px;
      background: white; border-radius: 999px; font-weight: 700;
    }
  </style>
</head>
<body>
  <div class="photo" id="photo">
    <div class="play" id="play">Play</div>
  </div>
</body>
</html>

top: 50%; left: 50% שם את הפינה העליונה השמאלית של האלמנט במרכז. האחוזים ב-translate() מתייחסים לגודל של האלמנט עצמו, ולכן -50% מזיז אותו אחורה בחצי מהרוחב והגובה שלו, יהיו אשר יהיו. ההורה חייב להיות ממוקם (position: relative), אחרת האלמנט מתמרכז ביחס לעמוד. מיקום מוסבר בעמוד ה-position.

גרסה לאלמנטים בגודל ידוע: position: absolute; inset: 0; margin: auto; יחד עם width ו-height. ה-margin האוטומטי מחלק את המקום בכל ארבעת הצדדים.

שיטה 5: align-content על בלוק רגיל

align-content: center עובד היום גם על מכלי block רגילים, לא רק על flex ו-grid. הוא ממרכז את התוכן אנכית בלי לשנות את האופן שבו הילדים מסודרים:

.parent {
  min-height: 200px;
  align-content: center;   /* vertical centering, still display: block */
}
.child {
  max-width: 300px;
  margin-inline: auto;     /* horizontal centering */
}

הוא נתמך בגרסאות הנוכחיות של Chrome, Firefox ו-Safari. דפדפנים ישנים מתעלמים ממנו, אז השתמשו ב-grid אם אתם צריכים לתמוך בהם.

מרכוז בכל המסך

כדי למרכז דיאלוג ב-viewport בלי קשר לגלילה, שלבו שכבה קבועה במסך מלא עם grid:

.overlay {
  position: fixed;
  inset: 0;                     /* covers the viewport */
  display: grid;
  place-items: center;
  background: rgb(0 0 0 / 50%);
}

למרכוז אנכי של התוכן של עמוד שלם, השתמשו ב-min-height: 100dvh על ההורה במקום 100vh: בטלפונים, 100vh כולל את האזור שמאחורי סרגלי הכלים של הדפדפן, ולכן ה"מרכז" יושב נמוך מדי.

מרכוז טקסט הוא משימה אחרת

כל מה שלמעלה ממרכז תיבה. כדי למרכז את הטקסט בתוך תיבה, השתמשו ב-text-align: center עליה, כמו שמוצג בעמוד מרכוז טקסט ב-HTML. לרוב צריך את שניהם: grid כדי למרכז את הכרטיס, ו-text-align כדי למרכז את השורות שבתוכו.

טעויות נפוצות

הורה בלי גובה. מרכוז אנכי צריך מקום פנוי; להורה שמתכווץ לתוכן שלו אין כזה.
margin: 0 auto על בלוק ברוחב מלא. תנו לו קודם width או max-width.
margin: auto כדי למרכז אנכית בזרימה רגילה. margin אנכי אוטומטי הוא שם 0; השתמשו ב-flex או ב-grid.
מרכוז absolute בלי הורה ממוקם. האלמנט מתמרכז בעמוד, לא בתיבה.
align-items: center על הילד. מאפייני יישור נכתבים על ההורה (מכל ה-flex או ה-grid), חוץ מ-margin: auto ו-align-self.
text-align: center כדי למרכז בלוק. הוא ממרכז תוכן inline (טקסט, תמונות, ילדי inline-block), לא ילד מסוג block.

שאלות נפוצות

איך ממרכזים div אופקית ואנכית?

הופכים את ההורה ל-grid וממרכזים את התוכן שלו: .parent { display: grid; place-items: center; }. הגרסה של flexbox היא display: flex; justify-content: center; align-items: center;. בשני המקרים ההורה צריך להיות גבוה יותר מה-div.

איך ממרכזים div רק אופקית?

נותנים לו רוחב ו-margin אוטומטי בצדדים: .box { width: 300px; margin: 0 auto; } (או max-width לבלוק רספונסיבי). margin-inline: auto הוא אותו הדבר במאפיינים לוגיים.

למה margin: 0 auto לא ממרכז את ה-div שלי?

ל-div אין רוחב קטן מהמכל שלו, כך שאין מקום פנוי לחלק (בלוק ממלא את כל הרוחב כברירת מחדל). הגדירו width או max-width. זה גם לא עושה כלום על אלמנטי inline, ואף פעם לא ממרכז אנכית בזרימה רגילה.

למה ה-div שלי לא מתמרכז אנכית?

ההורה גבוה רק כמו התוכן שלו, כך שאין מקום נוסף שבו אפשר למרכז. תנו להורה גובה (או min-height), ואז השתמשו במרכוז של grid או flexbox.

מה הדרך הכי קלה למרכז div?

display: grid; place-items: center; על ההורה: שתי הצהרות, שני הצירים, ילד בכל גודל. השתמשו ב-flexbox כשההורה גם מסדר פריטים אחרים בשורה.

איך ממרכזים טקסט בתוך div?

משתמשים ב-text-align: center על ה-div בשביל טקסט ותוכן inline. מרכוז ה-div עצמו ומרכוז הטקסט שבתוכו הן שתי משימות נפרדות.

מושגים קשורים