Как отцентровать элемент div с помощью css

Сегодня рассмотрим задачу, которая встречается у всех и каждого очень часто: горизонтальное выравнивание элемента/блока по центру с помощью CSS.

В CSS есть несколько способов центрирования div, в зависимости от ситуации. Вот основные:

1. Центрирование по горизонтали (inline-block)

Если div имеет display: inline-block;, можно использовать text-align: center; у родителя:

.parent {
  text-align: center;
}

.child {
  display: inline-block;
}

2. Центрирование по горизонтали (margin auto)

Если div имеет фиксированную ширину, можно использовать margin: auto:

.child {
  width: 200px;
  margin: 0 auto;
}

Вместо строгого width: 200px; можно указывать width: fit-content;

3. Полное центрирование (flexbox)

Самый удобный способ – использовать display: flex; у родителя:

.parent {
  display: flex;
  justify-content: center; /* По горизонтали */
  align-items: center; /* По вертикали */
  height: 100vh; /* Чтобы занять всю высоту экрана */
}

4. Центрирование через Grid

Grid-контейнер позволяет легко центрировать элемент:

.parent {
  display: grid;
  place-items: center;
  height: 100vh;
}

5. Абсолютное центрирование (position absolute)

Если div внутри другого блока, можно использовать position: absolute;:

.parent {
  position: relative;
  height: 100vh;
}

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

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

Всем удачи и до встречи!