Следуйте 5 методам центрирования, пройдя серию тестов, чтобы определить, какой из них наиболее устойчив к изменениям.
Центрирование в CSS — известная задача, полная шуток и насмешек. 2020 CSS уже повзрослел, и теперь мы можем смеяться над этими шутками честно, а не сквозь зубы.
Если вы предпочитаете видео, вот версия этого поста на YouTube:
Задача
Существуют разные типы центрирования. От разных вариантов использования, количества объектов для центрирования и т. д. Чтобы продемонстрировать обоснование «выигрышной» техники центрирования, я создал «Звонок устойчивости». Это серия стресс-тестов для каждой стратегии центрирования, которую нужно сбалансировать, а вы сможете наблюдать за ее эффективностью. В конце я раскрываю самую результативную технику, а также «самую ценную». Надеюсь, вы уйдете с новыми методами и решениями центрирования.
Звонок стойкости
Resilience Ringer — это отражение моих убеждений в том, что стратегия центрирования должна быть устойчивой к международным макетам, окнам просмотра переменного размера, редактированию текста и динамическому контенту. Эти принципы помогли разработать следующие тесты на устойчивость методов центрирования:
- Сжатый: центрирование должно обрабатывать изменения ширины.
- Сжатый: центрирование должно обрабатывать изменения высоты.
- Дубликат: центрирование должно быть динамическим в зависимости от количества элементов.
- Изменить: центрирование должно быть динамическим в зависимости от длины и языка контента.
- Поток: центрирование должно быть независимым от направления документа и режима записи.
Победившее решение должно продемонстрировать свою устойчивость, сохраняя содержимое по центру при его сжатии, сжатии, дублировании, редактировании и переключении на различные языковые режимы и направления. Надежный и устойчивый центр, безопасный центр.
Легенда
Я предоставил несколько визуальных цветовых подсказок, которые помогут вам сохранить некоторую метаинформацию в контексте:
- Розовая рамка указывает на владение стилями центрирования.
- Серый прямоугольник — это фон контейнера, в котором элементы должны быть центрированы.
- Каждый дочерний элемент имеет белый цвет фона, поэтому вы можете видеть влияние метода центрирования на размеры дочерних блоков (если таковые имеются).
5 участников
5 техник центрирования входят в Звонок Устойчивости, только одна получит Корону Устойчивости 👸.
1. Библиотека компонентов
- Сквиш : отлично!
- Сквош : отлично!
- Дубликат : отлично!
- Редактировать : отлично!
- Поток : отлично!
Будет сложно превзойти краткость display: grid
и сокращение place-content
. Поскольку он центрирует и оправдывает детей коллективно, это надежный метод центрирования для групп элементов, предназначенных для чтения.
.content-center {
display: grid;
place-content: center;
gap: 1ch;
}
- Контент центрируется даже в условиях ограниченного пространства и переполнения.
- Центрирование, редактирование и обслуживание — все в одном месте.
- Gap гарантирует равное расстояние между n детьми
- Сетка по умолчанию создает строки
- Самый широкий дочерний элемент (
max-content
) устанавливает ширину для всех остальных. Подробнее это будет обсуждаться в Gentle Flex .
Отлично подходит для макетов макросов, содержащих абзацы и заголовки, прототипы или вообще вещи, требующие четкого центрирования.
2. Нежный флекс
- Сквиш: отлично!
- Сквош: отлично!
- Дубликат: отлично!
- Редактировать: отлично!
- Поток: отлично!
Gentle Flex — это более верная стратегия, основанная только на центрировании. Это мягко и нежно, потому что в отличие от place-content: center
размеры дочерних блоков во время центрирования не изменяются. Как можно аккуратнее все предметы укладываются, центрируются и располагаются на расстоянии.
.gentle-flex {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1ch;
}
- Управляет только выравниванием, направлением и распределением.
- Редактирование и обслуживание — все в одном месте
- Gap гарантирует равное расстояние между n детьми
- Большинство строк кода
Отлично подходит как для макро, так и для микро макетов.
3. Автобот
- Сквиш: отлично
- Сквош: отлично
- Дублировать: хорошо
- Редактировать: отлично
- Поток: отличный
Контейнер настроен на гибкость без стилей выравнивания, а для прямых дочерних элементов используются автоматические поля. В margin: auto
работа со всех сторон элемента.
.autobot {
display: flex;
}
.autobot > * {
margin: auto;
}
- Забавный трюк
- Быстро и грязно
- Неудобные результаты при переполнении
- Использование распределения вместо пробелов означает, что при раскладке дети могут касаться сторон.
- «Вталкивание» в положение не кажется оптимальным и может привести к изменению размера детской коробки.
Отлично подходит для центрирования значков или псевдоэлементов.
4. Пушистый центр
- Сквиш: плохо
- Сквош: плохо
- Дубликат: плохо
- Редактировать: отлично!
- Поток: отлично! (пока вы используете логические свойства)
Конкурсант «пушистый центр» на сегодняшний день является нашим самым вкусным по звучанию претендентом и является единственной техникой центрирования, которая полностью принадлежит элементу/ребенку. Видите нашу сольную внутреннюю розовую рамку!?
.fluffy-center {
padding: 10ch;
}
- Защищает контент
- Атомный
- Каждый тест тайно содержит эту стратегию центрирования.
- Пробел в слове — это пробел
- Иллюзия бесполезности
- Между контейнером и предметами возникает конфликт, естественно, поскольку каждый из них очень тверд в выборе размера.
Отлично подходит для центрирования слов или фраз, тегов, таблеток, кнопок, фишек и многого другого.
5. Поп и плюх
- Сквиш: окей
- Сквош: окей
- Дубликат: плохо
- Редактировать: хорошо
- Поток: хорошо
Это «выскакивает», потому что абсолютное позиционирование выбивает элемент из нормального потока. «Шлепающаяся» часть названий возникла, когда я считаю ее наиболее полезной: положить ее поверх других вещей. Это классический и удобный метод центрирования наложения, гибкий и динамичный в зависимости от размера контента. Иногда вам просто нужно разместить пользовательский интерфейс поверх другого пользовательского интерфейса.
- Полезный
- Надежный
- Когда вам это нужно, это бесценно
- Код с отрицательными процентными значениями
- Требуется
position: relative
силы содержащего блока - Ранние и неуклюжие переносы строк
- В каждом содержащем блоке может быть только 1 без дополнительных усилий.
Отлично подходит для модальных окон, тостов и сообщений, стеков и эффектов глубины, всплывающих окон.
Победитель
Если бы я был на острове и мог владеть только одной техникой центрирования, это было бы…
[барабанная дробь]
Нежный флекс 🎉
.gentle-flex {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1ch;
}
Вы всегда можете найти его в моих таблицах стилей, потому что он полезен как для макро-, так и для микромакетов. Это универсальное надежное решение, результаты которого соответствуют моим ожиданиям. Кроме того, поскольку я заядлый фанат размеров, я склонен перейти к этому решению. Да, печатать очень много, но преимущества, которые это дает, перевешивают дополнительный код.
MVP
Пушистый центр
.fluffy-center {
padding: 2ch;
}
Пушистый центр настолько мал, что его легко не заметить как технику центрирования, но он является основой моей стратегии центрирования. Он настолько атомичен, что иногда я забываю, что использую его.
Заключение
Какие вещи нарушают вашу стратегию центрирования? Какие еще проблемы можно добавить к проблеме устойчивости? Я подумал о переводе и автоматическом переключении высоты контейнера… что еще!?
Теперь, когда вы знаете, как я это сделал, как бы вы поступили?! Давайте разнообразим наши подходы и изучим все способы разработки в Интернете. Следуйте инструкциям в этом посте, чтобы создать свой собственный пример центрирования, подобный приведенному в этом посте. Напишите мне свою версию в Твиттере, и я добавлю ее в раздел ремиксов сообщества ниже.