Центрирование в CSS
Следуйте 5 методам центрирования, когда они проходят серию тестов, чтобы определить, какой из них наиболее устойчив к изменениям.
Центрирование в CSS — печально известная проблема, обросшая массой шуток. Но к 2020 году CSS уже достаточно развился, и теперь мы можем посмеяться над этими шутками искренне, а не сквозь зубы.
Если вы предпочитаете видео, можете посмотреть видеоверсию этой статьи на YouTube:
Суть проблемы #
Существует множество видов центрирования. Они различаются в зависимости от вариантов использования, количества элементов, которые нужно центрировать, и т. д. Чтобы обосновать «выигрышную» технику центрирования, я создал The Resilience Ringer. Это серия стресс-тестов, позволяющих сбалансировать каждую стратегию центрирования, наблюдая за их эффективностью. В конце статьи я раскрою наиболее результативную технику, а также «самую ценную». Надеюсь, вы почерпнете из статьи новые методики и решения для центрирования.
Указание устойчивости #
Указание устойчивости (Resilience Ringer) — это проекция моей уверенности в том, что алгоритм центрирования должен быть устойчивым к международным макетам, окнам просмотра переменного размера, редактированию текста и динамическому контенту. Эти принципы помогли сформировать следующие тесты устойчивости для выдержки техник центрирования:
- Сжатый: центрирование должно выдерживать изменения ширины
- Сжатие: центрирование должно выдерживать изменение высоты
- Дублировать: центрирование должно быть динамическим по количеству элементов
- Изменить: центрирование должно быть динамическим по длине и языку контента
- Поток: центрирование должно быть независимым от направления документа и режима письма
Выигрышное решение должно продемонстрировать свою устойчивость, удерживая содержимое в центре при сжатии, сжатии, дублировании, редактировании и переключении на различные языковые режимы и направления. Надежный и жизнеспособный центр, надежный центр.
Легенда #
Я предоставил несколько визуальных цветовых подсказок, чтобы помочь вам сохранить некоторую метаинформацию в контексте:

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