Центрирование div с фиксированной шириной в CSS: 800px

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

Для профессионального центрирования блока div используйте сниппет CSS кода ниже:

.centered {
  width: 50%;  /* Укажите требуемую ширину для div */
  margin: 0 auto;  /* Это условие выравнивает ваш блок по центру */
}

Добавьте своему элементу класс .centered, пример представлен ниже:

<div class="centered">Теперь ваш div выровнен в центре, в полной гармонии</div>

Если мы используем margin: 0 auto;, то задаем равные отступы слева и справа, благодаря этому div выровнивается по центру в отношении своего родительского элемента.

Управление пространством блока с фиксированной шириной

Если ширина div задана фиксированно, например 800px, margin: 0 auto; — это отличный направляющий элемент. Не забудьте указать ширину, чтобы избежать нежелательного расширения содержимого:

.fixed-width-centered {
  width: 800px; /* Фиксируем ширину на уровне 800 пикселей. */
  margin: 0 auto; /* И ваш div выравнивается по центру. */
}

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

Центрирование с применением абсолютного позиционирования

Если необходимо отклониться от стандартов и дать вашему div взмыть вверх именно благодаря абсолютному позиционированию, придут на помощь свойства position: absolute; и transform:

.absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Ваш div теперь точно в центре. */
}

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

Flexbox — новый уровень комфорта для вашего div

Для горизонтального центрирования div оптимально использовать Flexbox. Это как место у окна в первом классе для вашего элемента. Запомните это: display: flex; justify-content: center;:

.flex-container {
  display: flex;
  justify-content: center; /* И ваш div направляется в желаемую точку — центр контейнера. */
}

.flex-item {
  width: 800px; /* Этот размер станет оптимальным для отображения содержимого. */
}

С Flexbox ваш div всегда будет располагаться в идеальном центре с беспрецедентной совместимостью между браузерами.

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

Центрирование div можно сравнить с достижением идеального баланса — это словно тренировка гимнаста:

|    В окне браузера                             |
|      :--------------------:                    |
|              🤹‍♂️                            |
|         (Ваш центрированный div)               |

Свойства text-align и margin в этом контексте выступают в роли уравновешивающего элемента.

div {
  text-align: center;
  margin: 0 auto;
}

Ваш div идеально выступает в главной роли. Примите уважение собравшихся! 🎉

Строчные элементы — исключения из правил автоматических отступов

Если автоматические отступы не работают с элементами строчного или строчно-блочного типа, используйте свойство text-align: center; для центирования:

.text-center-parent {
  text-align: center;
}

<div class="text-center-parent">
  <span>Центрируй меня!</span>
</div>

Контроль над элементами, содержимое которых выходит за границы

Если область div охватывает всю ширину, transform в сочетании с отрицательными значениями смещения позаботятся о том, чтобы ваш div оставался в центре внимания даже при выходе за границы:

.overflow-center {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

Центрирование с применением контейнерных запросов

Попробуйте освежить свой подход к центрированию, используя display: table; и display: table-cell; вместе с vertical-align: middle;:

.table-like-center {
  display: table;
  width: 100%; /* Сцена готова, включаем прожектор. */
}

.cell-like-center {
  display: table-cell;
  vertical-align: middle;
  text-align: center; 
}

Такой метод чувствует себя уютно и актуально, как классический Cadillac.

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

1. Centering in CSS: A Complete Guide | CSS-Tricks — практическое руководство, помогающее разобраться в возможностях центрирования с помощью CSS.
2. Center an element – CSS: Cascading Style Sheets | MDN — превосходное пособие по центрированию элементов от MDN.
3. Flexbox Froggy – A game for learning CSS flexbox — узнайте о мире CSS Flexbox через игру.
4. Grid Garden – A game for learning CSS grid layout — изучение CSS Grid Layout с помощью игрового формата.
5. Can I use... Support tables for HTML5, CSS3, etc — проверьте поддержку браузеров для новейших функций CSS.
6. Flexbox | Codrops — исчерпывающее руководство по использованию Flexbox.
7. A Visual Guide to CSS3 Flexbox Properties | DigitalOcean — обучающий материал с наглядными примерами использования Flexbox.