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

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

Adam Argyle

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

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

Задача

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

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

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

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

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

Легенда

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

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

5 участников

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

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

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

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

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

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

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;
}

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

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. Поток: хорошо

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

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

Победитель

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

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

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

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

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

MVP

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

.fluffy-center {
  padding: 2ch;
}

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

Заключение

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

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

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

• CSS-трюки с публикацией в блоге