Sobes.tech
Back to questions
Junior — Middle
91

Мог бы ты привести пример, как с помощью CSS можно сделать центрирование элемента div на странице?

Answer from AI

sobes.tech AI

Для центрирования элемента <div> на странице с помощью CSS можно использовать несколько способов. Один из самых простых и универсальных — использовать Flexbox:

body, html {
  height: 100%;
  margin: 0;
}

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

.centered-div {
  width: 200px;
  height: 100px;
  background-color: lightblue;
}

И HTML:

<div class="container">
  <div class="centered-div">Центрированный блок</div>
</div>

Этот способ выравнивает вложенный блок по центру экрана и по вертикали, и по горизонтали.

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

.centered-div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 100px;
  background-color: lightcoral;
}

Этот метод также центрирует элемент относительно окна браузера.