مركز المحتوى

هذا الأسلوب هو أسلوب توسيط مكوّن من بضعة أسطر من CSS ويعمل بشكل رائع مع العديد من العناصر، إلا أنّ له تأثير جانبي يتمثل في جعل العناصر الثانوية تطابق عرض العنصر الأوسع.

راجع المقالة الكاملة للحصول على مزيد من التفاصيل حول هذا الأسلوب ومتى يكون فعالاً.

المقالة الكاملة · الفيديو على YouTube · المصدر على جيت هب

HTML

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

CSS

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