Библиотека компонентов

Техника центрирования, состоящая всего из нескольких строк CSS, отлично работает для многих элементов, но имеет побочный эффект: дочерние элементы соответствуют ширине самого широкого элемента.

Прочитайте полную статью, чтобы узнать больше об этой технике и о том, когда она эффективна.

Полная статья · Видео на YouTube · Источник на Github

HTML

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

CSS


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