איך ממרכזים תוכן ב CSS?

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

מרכוז תוכן בתוך שורה

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

.child {
  margin: 0 auto;
}

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

.parent {
  text-align: center;
}

.child {
  display: inline-block;
}

מרכוז תוכן בצורה יחסית

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

.parent {
  position: relative;
}

.child {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

כמו שניתן לראות, אחרי שמיקמנו את התוכן שלנו בצורה יחסית לאלמנט האב, אנחנו צריכים להחזיר את התוכן שלנו ביחס לעצמו. כלומר – המיקום של התוכן שלנו ביחס לאלמנט האב מתייחס לפינה של התוכן שלנו, כך שם אנחנו רוצים שהוא יהיה באמת באמצע, אחרי שהרחקנו אותו מהפינה השמאלית ביותר והעליונה ביותר של האב, אנחנו צריכים להחזיר אותו לאותם כיוונים

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

מרכוז תוכן בקופסת Flex

במידה ואתם מעוניינים למרכז תוכן בתוך קופסת Flex, השיטה הפשוטה ביותר היא להגדיר על האב את שתי התכונות הבאות: justify-content: center ו align-items: center בצורה כזאת:

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

מרכוז תוכן בקופסת Grid

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

.parent {
  display: grid;
  place-content: center;
}

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