Как сделать знак плюс в точном центре круга на css?

Для создания знака плюс в точном центре круга на CSS можно использовать комбинацию различных свойств и селекторов. Вот пример кода:

HTML:

<div class="circle">
  <div class="plus">+</div>
</div>

CSS:

.circle {
  width: 100px;
  height: 100px;
  background-color: #000;
  border-radius: 50%;
  position: relative;
}

.plus {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 4px;
  background-color: #fff;
}

В данном примере мы создали <div> элемент с классом "circle", который будет представлять круг. Затем внутри этого элемента создали дополнительный <div> с классом "plus", который будет содержать знак плюс.

Свойство position: relative; у "circle" задает относительную позицию элемента, что позволит нам использовать абсолютную позицию для знака плюс внутри.

Затем у "plus" мы задаем абсолютную позицию с помощью position: absolute;, чтобы положение элемента определялось относительно его ближайшего родителя с заданной позицией (в данном случае, "circle").

Для создания точного центра, мы используем top: 50%; и left: 50%;, чтобы элемент "plus" был сдвинут на 50% от верхней и левой границы родительского элемента.

Наконец, с помощью transform: translate(-50%, -50%); мы сдвигаем элемент "plus" на половину своей ширины и высоты, чтобы он находился точно в центре родительского элемента.

Затем мы задаем ширину и высоту знака плюс с помощью width и height, а также фоновый цвет с помощью background-color, чтобы он отображался внутри круга с черным фоном.

В результате, при использовании данного кода мы получим круг с знаком плюс в точном центре. Круг можно изменять по размеру, меняя значения свойств width и height для "circle", а также менять цвет круга и знака плюс, изменяя значения свойств background-color.