Центрирование в CSS

Следуйте 5 методам центрирования, когда они проходят серию тестов, чтобы определить, какой из них наиболее устойчив к изменениям.

Dec 16, 2020

Available in: English, 日本語, and 한국어

Adam Argyle

TwitterGitHubGlitchHomepage

Центрирование в CSS — печально известная проблема, обросшая массой шуток. Но к 2020 году CSS уже достаточно развился, и теперь мы можем посмеяться над этими шутками искренне, а не сквозь зубы.

Если вы предпочитаете видео, можете посмотреть видеоверсию этой статьи на YouTube:

Суть проблемы #

Существует множество видов центрирования. Они различаются в зависимости от вариантов использования, количества элементов, которые нужно центрировать, и т. д. Чтобы обосновать «выигрышную» технику центрирования, я создал The Resilience Ringer. Это серия стресс-тестов, позволяющих сбалансировать каждую стратегию центрирования, наблюдая за их эффективностью. В конце статьи я раскрою наиболее результативную технику, а также «самую ценную». Надеюсь, вы почерпнете из статьи новые методики и решения для центрирования.

Указание устойчивости #

Указание устойчивости (Resilience Ringer) — это проекция моей уверенности в том, что алгоритм центрирования должен быть устойчивым к международным макетам, окнам просмотра переменного размера, редактированию текста и динамическому контенту. Эти принципы помогли сформировать следующие тесты устойчивости для выдержки техник центрирования:

1. Сжатый: центрирование должно выдерживать изменения ширины
2. Сжатие: центрирование должно выдерживать изменение высоты
3. Дублировать: центрирование должно быть динамическим по количеству элементов
4. Изменить: центрирование должно быть динамическим по длине и языку контента
5. Поток: центрирование должно быть независимым от направления документа и режима письма

Выигрышное решение должно продемонстрировать свою устойчивость, удерживая содержимое в центре при сжатии, сжатии, дублировании, редактировании и переключении на различные языковые режимы и направления. Надежный и жизнеспособный центр, надежный центр.

Легенда #

Я предоставил несколько визуальных цветовых подсказок, чтобы помочь вам сохранить некоторую метаинформацию в контексте:

• Розовая рамка указывает на владение стилями центрирования.
• Серый прямоугольник - это фон на контейнере, на котором необходимо разместить элементы по центру.
• Каждый ребенок имеет белый цвет фона, поэтому вы можете увидеть любые эффекты, которые техника центрирования оказывает на размеры дочернего блока (если таковые имеются).

5 участников #

В Звонок стойкости входят 5 техник центрирования, только один получит Корону стойкости 👸.

1. Центр содержимого #

1. Squish : отлично!
2. Сквош : отлично!
3. Дубликат : отлично!
4. Изменить : отлично!
5. Расход : отличный!

Будет сложно превзойти краткость display: grid и сокращение place-content Поскольку он центрирует и оправдывает детей коллективно, это надежный метод центрирования для групп элементов, предназначенных для чтения.

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

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}

.autobot {
  display: flex;
}
.autobot > * {
  margin: auto;
}

.fluffy-center {
  padding: 10ch;
}

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}

.fluffy-center {
  padding: 2ch;
}