Центрирование фиксированного div по горизонтали в CSS

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

Чтобы сделать горизонтальное центрирование для фиксированного div, примените в совокупности свойства position: fixed, left: 50% и transform: translateX(-50%). Этот CSS-код обеспечит точное позиционирование элемента по центру:

.fixed-center {
  position: fixed;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

Примените этот стиль к div для его центрирования:

<div class="fixed-center">Центрируй меня</div>

Многообразие методов центрирования

Вариантов центрирования множество, вы можете выбрать себе наиболее подходящий:

Метод 1: Центрирование на всю ширину с автоматическими отступами

Вы можете расположить фиксированный div на переднем плане, используя следующий CSS:

.full-width-center {
  position: fixed;
  left: 0;
  right: 0;
  margin: auto;
}

Свойство margin: auto позволяет произвести "магическое" выравнивание элемента горизонтально.

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

Метод 2: Центрирование с отрицательным маржином

Этот метод применяется уже довольно долго:

.fixed-neg-margin {
  position: fixed;
  left: 50%;
  width: 500px;
  margin-left: -250px;
}

Простой и надёжный способ, ставший в своё время классикой, наравне с легендарными рок-группами.

Метод 3: Адаптивное центрирование с максимальной шириной

Ограничьте div в размерах, чтобы он не занимал излишнего места:

.responsive-center {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  max-width: 100%;
}

Такие стили обеспечат чуткое и с уважением к пространству центрирование.

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

Воспринимайте фиксированный div как картину Моны Лизы:

Лувр (видимая область):
|-------------------------------------|
|                                     |
|         🖼 <- Мона Лиза             |
|    (Наш фиксированный div в CSS)   |
|                                     |
|-------------------------------------|

Для её центрирования используйте CSS:

.fixed-div {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
}

С использованием этого подхода вы сможете центрировать элемент с мастерством и изяществом.

Искусство центрирования строчных элементов

Выравнивание строчных элементов по центру сводится к следующим стилям:

.fixed-inline-center {
  position: fixed;
  width: 100%;
  text-align: center;
}

.inline-child {
  display: inline-block;
}

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

Вертикальное центрирование: поднятие ввысь

Мы рассматриваем пространство в двух измерениях:

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

Данный CSS-код центрирует фиксированный div прямо в середине видимой области.

Центрирование с помощью Flexbox: акробатическое мастерство

Войдите в эру современной вёрстки с помощью flexbox:

.flex-container {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}

.flex-center {
  flex: 0 1 auto;
}

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