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

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

Адам Аргайл

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

Если вы предпочитаете видео, вот версия этого поста на YouTube:

Соревнование

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

Звонок устойчивости

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

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

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

Легенда

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

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

5 участников

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 ) устанавливает ширину для всех остальных. Подробнее это будет обсуждаться в Gentle Flex .

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

2. Нежный флекс

  1. Сквиш: отлично!
  2. Сквош: отлично!
  3. Дубликат: отлично!
  4. Редактировать: отлично!
  5. Поток: отлично!

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

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

Отлично подходит как для макро, так и для микро макетов.

3. Автобот

  1. Сквиш: отлично
  2. Сквош: отлично
  3. Дублировать: хорошо
  4. Редактировать: отлично
  5. Поток: отличный

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

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

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

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

  1. Сквиш: плохо
  2. Сквош: плохо
  3. Дубликат: плохо
  4. Редактировать: отлично!
  5. Поток: отлично! (пока вы используете логические свойства)

Конкурсант «пушистый центр» на сегодняшний день является нашим самым вкусным по звучанию претендентом и является единственной техникой центрирования, которая полностью принадлежит элементу/ребенку. Видите нашу сольную внутреннюю розовую рамку!?

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

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

5. Поп и плюх

  1. Сквиш: окей
  2. Сквош: окей
  3. Дубликат: плохо
  4. Редактировать: хорошо
  5. Поток: хорошо

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

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

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

Победитель

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

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

Нежный флекс 🎉

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

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

MVP

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

.fluffy-center {
  padding: 2ch;
}

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

Заключение

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

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

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