Вернуться к уроку

Поместите мяч в центр поля (CSS)

важность: 5

Поместите мяч в центр поля при помощи CSS.

Исходный код:

Используйте CSS, чтобы поместить мяч в центр:

  • CSS для центрирования может использовать размеры мяча.
  • CSS для центрирования не должен опираться на конкретный размер поля.

Открыть песочницу для задачи.

Сместим мяч в центр при помощи left/top=50%, а затем приподымем его указанием margin:

#ball {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -20px;
  margin-top: -20px;
}

Открыть решение в песочнице.