Центрирование div с position:fixed в CSS: альтернативы

Быстрый ответ

Вам потребуется назначить элементу следующие CSS свойства: position: fixed, top и left со значением 50%. Для дополнительной настройки положения воспользуйтесь transform: translate(-50%, -50%). Дальше демонстрируется соответствующий пример:

.center-fixed {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Присвоив вашему элементу класс .center-fixed, вы заставите его отображаться в центре экрана:

<div class="center-fixed">Вот и я в центре! Благодарю CSS!</div>

Таким образом вы используете трансформации из CSS3 для центрирования элементов без необходимости учитывать их размеры.

Визуализация

Представьте, что div это шар в небе:

            ☁️  ☁️  ☁️           
            🎈            
            ⚓️

🎈 символизирует наш блок, который может свободно перемещаться в пространстве. Нашей задачей будет зафиксировать его по центру, как будто привязать к облаку ☁️ (фиксированное положение).

Шарик остается в центре, даже если прокрутка (ветер) пытается сместить его. Мы используем шнуры (left: 50%; transform: translateX(-50%);), нежно тянущие шар к центру:

            ☁️  ☁️  ☁️ 
            ↕️            
            🎈            
            ↕️            
            ⚓️

Зафиксировано: 🎈 находится в центре, несмотря ни на какие обстоятельства.

Центрирование с Flexbox

.flex-center-fixed {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

Подробнее об этом расскажет наш спикер на видео

Центрирование с Grid

.grid-center-fixed {
  display: grid;
  place-items: center;
  position: fixed;
  inset: 0;
}

Центрирование для устаревших браузеров

.almost-centered {
  position: fixed; 
  width: 75%;
  top: 50%;
  left: 50%;
  margin-left: -37.5%;
}

Создание адаптивного дизайна

Вам следует:

• Применять процентные значения для width и margin-left, сохраняя адаптивность.
• Заметить, что Flexbox и Grid контейнеры автоматически подстраивают размеры, проявляя свою эффективность.

Другие способы центрирования

• Пользуйтесь функцией Calc для вычисления центровки, например, calc(50vw – 50%).
• Чтобы центрировать содержимое в рамках фиксированной ширины, назначьте width: 100%.
• В некторых случаях может подойти старый метод с align="center" при фиксированной позиции.

Продвинутые методы центрирования

Центрирование элементов с динамическим размером

.dynamic-center-fixed {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max-content;
  height: max-content;
}

Использование комбинаций методов для гибкости макетов

Сочетайте flexbox или grid с фиксированным позиционированием. Для улучшения адаптивности добавьте медиазапросы, а также, при необходимости, JavaScript для динамической корректировки.

Учтите возможные проблемы

• Появление полосы прокрутки может сдвинуть элементы от центра. Используйте calc(50% – scrollbarWidth) для коррекции позиции, либо решите проблему с использованием JavaScript.
• Изменение размеров содержимого или окна браузера могут нарушить центровку. Стабильность здесь ключ к успеху, поэтому очень важно поддерживать адаптивность вашего дизайна.

Полезные материалы

1. Центровка в CSS: Полное руководство | CSS-Tricks
2. position – CSS: Каскадные таблицы стилей | MDN
3. Как центровать элемент с position: fixed | Stack Overflow