Центрирование в CSS традиционно было причиной разочарования. Это повседневная задача, но существует множество возможных решений! Подход, который вы выберете, будет отличаться в зависимости от того, центрируете ли вы по горизонтали, по вертикали или по обоим направлениям!

В этом руководстве мы рассмотрим, какие методы лучше всего подходят для каждого сценария.

🤓 Хотите быть в курсе новостей веб-разработчиков?
🚀 Хотите, чтобы последние новости доставлялись прямо на ваш почтовый ящик?
🎉 Присоединяйтесь к растущему сообществу дизайнеров и разработчиков!

Подпишитесь на мою рассылку здесь → https://easeout.eo.page

Горизонтальное центрирование

Встроенные элементы

Встроенные элементы, такие как текст (и ссылки), очень просто центрировать по горизонтали с помощью свойства text-align:

p {
  text-align: center;
}

Это работает для inline, inline-block, inline-flex, inline-table и т. Д.

Блочные элементы

Элемент уровня блока можно центрировать, если для его свойств margin-left и margin-right установлено значение auto (при условии, что элемент имеет width). Часто это делается с помощью сокращения margin:

.element {
  margin: 0 auto;
}

Однако современный способ центрировать элементы уровня блока (все, что не является текстом) - использовать Flexbox!

Предположим, у нас есть такой HTML:

<div class="container">
  <div>.element</div>
</div>

Добавьте следующий CSS:

.container {
  display: flex;
  justify-content: center;
}

Это будет горизонтально центрировать любой элемент внутри элемента .container.

Вертикальное центрирование

Вертикальное центрирование традиционно было довольно сложной задачей. И чаще всего этого можно было добиться с помощью такого кода:

.parent {   
  position: relative; 
} 
.child {   
  position: absolute;   
  top: 50%;   
  transform: translateY(-50%); 
}

Это действительно работает, поскольку он перемещает дочерний элемент назад на половину его высоты. И он помещает середину дочернего элемента в середину его родительского.

Однако с помощью Flexbox мы можем сделать это намного проще:

.container {
  display: flex;
  align-items: center;
}

Это будет вертикально центрировать любой элемент внутри элемента .container.

Центрирование как по вертикали, так и по горизонтали

Чтобы центрировать как по вертикали, так и по горизонтали, мы просто комбинируем эти техники!

Чтобы идеально центрировать элемент в середине его контейнера:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

Если использовать CSS Grid, это тоже легко сделать:

.container {
  display: grid;
  place-items: center;
}

В CSS можно центрировать все!

Когда вы познакомитесь с основами Flexbox и Grid, вы увидите, насколько это просто! 👍

Готовы ли вы поднять свои навыки CSS на новый уровень? Начните прямо сейчас с моей новой электронной книги: Руководство по CSS: Полное руководство по современному CSS. Будьте в курсе всего, от основных концепций, таких как Flexbox и Grid, до более сложных тем, таких как анимация, архитектура и многое другое !!

Спасибо за чтение! 🎉🎉🎉