مرکز محتوا

یک تکنیک مرکزی که فقط چند خط CSS است، برای بسیاری از عناصر عالی عمل می‌کند، اما این اثر جانبی دارد که باعث می‌شود کودکان با عرض وسیع‌ترین عنصر مطابقت داشته باشند.

برای اطلاعات بیشتر در مورد این تکنیک و زمان کارآمد بودن آن، مقاله کامل را ببینید.

مقاله کامل · ویدیو در یوتیوب · منبع در Github

HTML

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

CSS


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