Встречается на собеседованиях • сегодня

Как центрировать блок в CSS

Есть несколько способов центрировать блок по горизонтали и вертикали:

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

css

.block {
  margin: 0 auto; /* для блочных элементов */
  width: 200px;
}

Flexbox (горизонтально и вертикально):

css

.parent {
  display: flex;
  justify-content: center; /* по горизонтали */
  align-items: center; /* по вертикали */
  height: 100vh;
}

Grid (горизонтально и вертикально):

css

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

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

css

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

Выбор метода зависит от контекста и поддержки браузерами. Flexbox и Grid - современные и предпочтительные способы.

Это единственный вопрос по вашему фильтру

как отвечать на вопрос

пример собеседования

фреймворки на собеседовании

типичные вопросы junior

интервью вопросы и ответы