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

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

Adam Argyle

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

Если вы предпочитаете видео, посмотрите ролик на YouTube:

Задача

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

Устойчивость

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

  1. Сжатие. При центрировании должна быть возможность изменять ширину.
  2. Сжатие. При центрировании должна быть возможность изменять высоту.
  3. Duplicate: centering should be dynamic to number of items
  4. Изменение. Выравнивание по центру должно быть динамическим и зависеть от длины и языка контента.
  5. Поток. Центрирование не должно зависеть от направления документа и режима письма.

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

Legend

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

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

5 участников

В соревновании участвуют пять техник, но только одна получит корону 👸.

1. Центр контента

Редактирование и дублирование контента с помощью VisBug
  1. Сближение рук. Отлично!
  2. Сквош – отлично!
  3. Дублирование. Отлично!
  4. Редактирование.
  5. Поток. Отлично!

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

.content-center {
  display: grid;
  place-content: center;
  gap: 1ch;
}
Преимущества
  • Контент центрируется даже в ограниченном пространстве и при переполнении.
  • Все изменения и обслуживание выполняются в одном месте.
  • Gap гарантирует равные интервалы между n дочерними элементами.
  • По умолчанию сетка создает строки.
Недостатки
  • Ширина самого широкого дочернего элемента (max-content) определяет ширину всех остальных. Подробнее об этом мы поговорим в разделе Мягкая гибкость.

Подходит для макромакетов, содержащих абзацы и заголовки, прототипов или в целом для элементов, которые должны быть выровнены по центру.

2. Мягкая растяжка

  1. Squish: Отлично!
  2. Сквош. Отлично!
  3. Дубликат. Отлично!
  4. Изменить. Отлично!
  5. Flow: great!

Gentle Flex – это стратегия, которая только центрирует. Оно мягкое и нежное, потому что, в отличие от place-content: center, размеры дочерних блоков не меняются при центрировании. Все элементы аккуратно сложены, выровнены по центру и разделены.

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}
Преимущества
  • Управляет только выравниванием, направлением и распределением.
  • Все инструменты для редактирования и обслуживания в одном месте.
  • Gap гарантирует равные интервалы между n дочерними элементами.
Недостатки
  • Больше всего строк кода

Подходит как для макро-, так и для микромакетов.

3. Автобот

  1. Squish: отлично
  2. Сквош: отлично
  3. Дубликат: штраф
  4. Изменить: отлично
  5. Поток: отличный.

Контейнер настроен как flex-контейнер без стилей выравнивания, а для прямых дочерних элементов заданы автоматические поля. Есть что-то ностальгическое и прекрасное в том, что margin: auto работает со всеми сторонами элемента.

.autobot {
  display: flex;
}
.autobot > * {
  margin: auto;
}
Преимущества
  • Забавный трюк
  • Быстро и небрежно
Недостатки
  • Неудобные результаты при переполнении
  • Если полагаться на распределение, а не на зазоры, то дочерние элементы могут соприкасаться.
  • "Выталкивание" в позицию не кажется оптимальным и может привести к изменению размера дочернего блока.

Отлично подходит для центрирования значков или псевдоэлементов.

4. Пушистый центр

  1. Сжатие: плохо.
  2. Сквош: плохо.
  3. Дубликат: плохо.
  4. Изменить. Отлично!
  5. Flow: great! (если вы используете логические свойства)

"Пушистый центр" – это, пожалуй, самый вкусный вариант и единственный метод центрирования, который полностью принадлежит элементу/дочернему элементу. Видите розовую рамку?

.fluffy-center {
  padding: 10ch;
}
Преимущества
  • Защита контента
  • Атом
  • Каждый тест содержит эту стратегию центрирования
  • Пробел между словами – это промежуток
Недостатки
  • Иллюзия бесполезности
  • Возникает конфликт между контейнером и элементами, поскольку каждый из них имеет фиксированный размер.

Подходит для центрирования слов или фраз, тегов, кнопок, чипов и многого другого.

5. Поп и Плюша

  1. Сближение рук: нормально.
  2. Сквош: нормально
  3. Дубликат: плохо.
  4. Изменить: штраф
  5. Поток: нормальный.

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

Преимущества
  • Полезная подсказка
  • Надежны
  • Когда он нужен, он бесценен
Недостатки
  • Код с отрицательными процентными значениями
  • Для принудительного создания содержащего блока требуется position: relative.
  • Преждевременные и неуместные разрывы строк
  • В одном блоке может быть только один элемент, и для этого не нужно прилагать дополнительных усилий.

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

Победитель

Если бы я оказался на необитаемом острове и мог выбрать только одну технику центрирования, это было бы…

[барабанная дробь]

Gentle Flex 🎉

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

Вы всегда можете найти его в моих таблицах стилей, потому что он полезен как для макро-, так и для микромакетов. Это надежное решение, которое дает ожидаемые результаты. Кроме того, поскольку я фанат внутренних размеров, я склонен перейти к этому решению. Да, это много кода, но преимущества, которые он предоставляет, перевешивают дополнительный код.

Самый ценный игрок

Fluffy Center

.fluffy-center {
  padding: 2ch;
}

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

Заключение

Что может нарушить ваши стратегии центрирования? Какие ещё проблемы можно добавить в список? Я думал о переводе и автоматическом переключателе высоты на контейнере… что ещё!?

Теперь, когда вы знаете, как это сделала я, как бы вы это сделали?! Давайте разнообразим наши подходы и изучим все способы создания веб-сайтов. Выполните практическую работу, чтобы создать собственный пример центрирования, как в этой статье. Отправьте мне в Твиттере свою версию, и я добавлю ее в раздел Ремиксы сообщества ниже.

Ремиксы сообщества