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

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

Dec 16, 2020

Available in: English, 日本語, and 한국어

Adam Argyle

Twitter GitHub Glitch Homepage

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

Если вы предпочитаете видео, можете посмотреть видеоверсию этой статьи на YouTube:

Суть проблемы #

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

Указание устойчивости #

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

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

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

Легенда #

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

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

5 участников #

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

1. Центр содержимого #

1. Squish : отлично!
2. Сквош : отлично!
3. Дубликат : отлично!
4. Изменить : отлично!
5. Расход : отличный!

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

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

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

place-content

2. Нежный изгиб #

1. Squish: отлично!
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. Squish: отлично
2. Сквош: отличный
3. Дубликат: отлично
4. Изменить: отлично
5. Расход: отличный

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

.autobot {
  display: flex;
}
.autobot > * {
  margin: auto;
}

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

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

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

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

.fluffy-center {
  padding: 10ch;
}

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

5. Pop & Plop #

1. Squish: хорошо
2. Сквош: хорошо
3. Дубликат: плохо
4. Изменить: хорошо
5. Расход: отлично

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

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

Победитель #

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

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

Нежная гибкость 🎉

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

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

MVP #

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

.fluffy-center {
  padding: 2ch;
}

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

Заключение #

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

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

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

• CSS-хитрости с сообщением в блоге