Как расположить Div по центру родителя?

Центрирование элемента в родителе

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

1. Flexbox (рекомендуемый способ)

Самый современный и удобный подход для центрирования:

.parent {
  display: flex;
  justify-content: center;  /* По горизонтали */
  align-items: center;      /* По вертикали */
  height: 200px;            /* Нужна высота */
}

.child {
  width: 100px;
  height: 100px;
  background: blue;
}

<div class="parent">
  <div class="child"></div>
</div>

Это центрирует элемент как горизонтально, так и вертикально. Если нужно центрировать несколько элементов, они все расположатся в центре.

2. Grid

Другой современный способ с CSS Grid:

.parent {
  display: grid;
  place-items: center;  /* Центрирует и горизонтально, и вертикально */
  height: 200px;
}

.child {
  width: 100px;
  height: 100px;
}

place-items: center - это сокращение для align-items: center и justify-items: center.

3. Абсолютное позиционирование с transform

Один из старых, но все еще полезных методов:

.parent {
  position: relative;
  height: 200px;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);  /* Сдвигает на половину собственного размера */
  width: 100px;
  height: 100px;
}

Этот метод работает для элементов любого размера и не требует знания их размеров заранее.

4. Margin: auto с абсолютным позиционированием

Другой способ с абсолютным позиционированием:

.parent {
  position: relative;
  height: 200px;
}

.child {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 100px;
  height: 100px;
}

Этот метод требует явного указания ширины и высоты.

5. Line-height (только для текста)

Для центрирования текста или одной строки:

.parent {
  height: 200px;
  line-height: 200px;  /* Такая же как высота parent */
}

.child {
  display: inline-block;
}

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

6. Padding (для простых случаев)

Если нужно центрировать содержимое и размеры известны:

.parent {
  padding: 50px;  /* Равные отступы сверху и снизу, слева и справа */
}

7. Сравнение методов в таблице

8. Практический пример на Tailwind CSS

Если используешь Tailwind:

<!-- Flexbox способ -->
<div class="flex items-center justify-center h-64">
  <div class="w-24 h-24 bg-blue-500"></div>
</div>

<!-- Grid способ -->
<div class="grid place-items-center h-64">
  <div class="w-24 h-24 bg-blue-500"></div>
</div>

9. React компонент для центрирования

function CenteredContainer({ children, height = "200px" }) {
  return (
    <div style={{
      display: "flex",
      justifyContent: "center",
      alignItems: "center",
      height
    }}>
      {children}
    </div>
  );
}

// Использование
<CenteredContainer height="300px">
  <div>Я в центре!</div>
</CenteredContainer>

10. Что выбрать?

• Для большинства случаев: flexbox
• Для сложных макетов: grid
• Для наследования: абсолютное позиционирование с transform
• Для старых браузеров: абсолютное позиционирование

Мой практический совет: используй flexbox в 90% случаев. Это просто, понятно и работает везде. Grid выбирай, когда уже используешь его для макета страницы. Абсолютное позиционирование используй в исключительных случаях.