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

Question

[vladimirir]

Добрый день. Возникла следующая проблема. Требовалось создать значок "плюс в кружке", где плюс находится точно в центре кружка. При этом сам плюс является after-псевдоэлементом для одного div-а.
Код псевдоэлемента:

content: '+';
		 display: flex;
		 position: absolute;
		 z-index: 5;
		 font-size: 35px;
		 font-weight: 400;
		 color: white;
		 background-color: #1ED4B3;
		 border: solid 1px #1ED4B3;
		 border-radius: 50%;
		 width: 45px;
		 height: 45px;
		 align-items: center !important;
		 flex-direction:column !important;
		 justify-content: space-evenly !important;

Всё работает нормально для десктопных версий, но на всех мобильных браузерах проблема в том, что знак плюса в кружке сдвинут кверху, а не находится по центру.
Пробовал уже использовать знак заглавного плюса U+FF0B , пробовал использовать justify-content: space-between , justify-content: space-around , justify-content: center , align-items: stretch .

Есть идеи, из-за чего такое может быть и как это можно исправить?

Более полный код (включая класс div-а , к которому привязан псевдоэлемент):

.div__after{
	display: flex;
	flex-direction: column;
	align-content: center;
	align-items: center;
	&::after{
		 content: '+';
		 display: flex;
		 position: absolute;
		 z-index: 5;
		 font-size: 35px;
		 font-weight: 400;
		 color: white;
		 background-color: #1ED4B3;
		 border: solid 1px #1ED4B3;
		 border-radius: 50%;
		 width: 45px;
		 height: 45px;
		 align-items: center !important;
		 flex-direction:column !important;
		 justify-content: space-evenly !important;
		@media (--xs-viewport){
			top: calc(100% - 10px);
		}
		@media (--md-viewport) {
			top: 25%;
			left: calc(100% - 10.5px);
		}
		@media (--lg-viewport) {
			left: calc(100% - 7.5px);
		}
	}
}

Answer 1

[Виталий Першин]

Сделайте плюс не шрифтом, а блоком из горизонтальной и вертикальной линий, потому что у шрифтов полно свойств:

Чему к примеру равна горизонтальная линия вашего шрифтового плюса при размере 35px? Если у вас размер блока 45px, то линия должна быть так же с нечетным размером ровно 1px или 3px, или 5px в любом другом случае (1.2px, 3.6px, 4px) браузер начнет смещать ваш плюс вверх и вниз, что вы и наблюдаете.

Если же блок будет с четным значением, например 44px, тогда, чтобы плюс стал по центру у него должен быть размер 2px,4px и т.д..

Шрифты для такой задачи не подходят, тем более с изменением шрифта изменится и его центр.

Comments

[vladimirir]

Спасибо! Прошу прощения за, возможно, нубский вопрос, но как я смогу две пересекающиеся черты в content вставить?

[Сергей delphinpro]

vladimirir, одна черта - after, вторая - before. content:'' (пустой). размеры черточек сами задаете.

[Сергей delphinpro]

vladimirir,

[vladimirir]

Сергей delphinpro, спасибо большое)

Answer 2

[NeshnyyFevral]