т л;доктор: Мы можем центрировать абсолютно позиционированные элементы в трёх строках CSS. И это работает во всех браузерах!
.element {
position: absolute;
place-self: center;
inset: 0;
}Почему? Ну, это требует длинного ответа.
За последние годы в CSS появилось множество новых функций, которые не обязательно позволяют нам делать новые вещи, но определенно делают их проще и проще. Например, нам больше не нужно жестко запрограммировать индекс:
इसके बजाय, यह सब इसमें संघनित है सहोदर-सूचकांक() И sibling-count() Работа. Таких недавних примеров немало.
Тем не менее, есть одна маленькая вещь, которая выглядит так, как будто мы делали это десятилетиями: Центрирование абсолютно позиционированного элементаЧего мы обычно добиваемся следующим образом:
.element {
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
}Мы перемещаем верхний левый угол элемента в центр, затем перемещаем его обратно на 50 %, чтобы он оказался по центру.
В этом подходе нет ничего плохого – мы применяем его десятилетиями. но все равно такое ощущение старый способ. это единственный способ? Ну и есть еще один неизвестный кроссбраузерный способ, который не только центрирует, но и удобно размещает любой абсолютно позиционированный элемент. И самое приятное то, что он повторно использует знакомые align-self И justify-self Свойство.
Выявлено, что эти свойства (вместе с их place-self Сокращение) теперь работают с абсолютно позиционированными элементами. Однако если мы попытаемся использовать их как есть, то увидим, что наш элемент вообще не перемещается.
/* Doesn't work!! */
.element {
position: absolute;
place-self: center;
}итак, как align-self И justify-self Работать для абсолютных элементов? Может показаться очевидным, что они должны выровнять элемент, и это правда, но конкретно они выравнивают его внутри этого содержащий модифицированный вставкой блок (ИМКБ). Хорошо... но что такое IMCB?
Представьте, что мы установили наш абсолютный элемент width И height К 100%. Хотя положение элемента абсолютно, оно, конечно, не растет бесконечно, а скорее ограничено тем, что известно как блок, содержащий.
Содержащий блок является ближайшим предком с новым контекстом стека. По умолчанию это html Элемент.
Мы можем изменить это, используя содержащий блок inset качества (особенно) top, right, bottomИ left). Я так и думал inset Свойства исправили углы элемента (я даже сказал это несколько секунд назад), но на самом деле мы исправляем IMCB. границы.
По умолчанию IMCB имеет тот же размер, что и размеры элемента. Итак, во-первых, align-self И justify-self Они пытались сконцентрировать элемент внутри себя, но ничего не вышло. Затем наш последний шаг — установить IMCB так, чтобы он был идентичен содержащему блоку.
.element {
position: absolute;
place-self: center;
top: 0;
right: 0;
bottom: 0;
left: 0;
}Или, используя их inset Сокращение:
.element {
position: absolute;
place-self: center;
inset: 0;
}Всего три строчки! Победа для энтузиастов CSS. Конечно, я могу схитрить, потому что по старинке мы могли бы также использовать inset свойство и сократим его до трех строк, но... давайте пока проигнорируем этот факт.
Мы не ограничиваемся центрированием всех остальных элементов. align-self И justify-self Посты работают отлично. Это обеспечивает более идиоматический способ установки абсолютных элементов.
Совет для профессионалов: Если мы хотим оставить пространство между абсолютно позиционированным элементом и содержащим его блоком, мы можем либо добавить margin набор или контейнер для элемента inset На желаемую вакансию.
Самое приятное то, что я проверил Caniuse, и хотя Safari изначально не поддерживал его, после тестирования выяснилось, что он работает во всех браузерах!
