Способы центрирования элементов с помощью CSS

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

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

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

Строчные элементы

Строчные элементы, такие как текст (и ссылки), очень просто центрировать по горизонтали с помощью свойства 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, вы увидите, насколько это просто!

Заключение

Если вам понравилась эта статья, следуйте за мной в Twitter, где я ежедневно пишу о вещах, связанных с техникой!
Если вам понравилась эта статья и вы хотите оставить совет — нажмите здесь

🌎 Давайте общаться

• Портфолио

• Twitter

• LinkedIn

• Hashnode

• Devto

• Medium

• Github

• Codepen