מרכז התוכן

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

במאמר המלא מפורט מידע נוסף על השיטה הזו ועל מידת היעילות שלה.

המאמר המלא · סרטון ב-YouTube · מקור ב-GitHub

HTML

<article class="content-center">
  <h1>Content Center</h1>
</article>

CSS

        .content-center {
  display: grid;
  place-content: center;
  gap: 1ch;
}