Как отцентировать текст внутри div?

Question

[Петр Питерский]

.createButton {
	height: 3rem;
	width: 3rem;
	border-radius: 50%;
	color: #FFF;
	background: var(--green-color);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 3rem;
	font-weight: 600;
}

<div class="createButton">+</div>
Почему-то плюс не совсем по центру (по вертикали), конечно можно править всякими отрицательными маргинами, но хотелось бы без костылей

Comments

[Ankhena]

но хотелось бы без костылей

Без костылей кнопки хорошо бы делать button, а иконки вставлять svg (фоном или лучше фоном (масками) псевдо).

[Александр]

Замечательная статья на Хабре: Сложнейшая проблема компьютерных наук: центрирование

Answer 1

[Сергей delphinpro]

Шрифтовой плюс всегда будет криво стоять по вертикали. как и минус.
Сделайте svg иконку для кнопки.

Answer 2

[Данила]

Проблема может быть связана с особенностями шрифта, который используется для плюса. Попробуйте добавить свойство line-height, чтобы оно совпадало с высотой элемента:

.createButton {
    height: 3rem;
    width: 3rem;
    border-radius: 50%;
    color: #FFF;
    background: var(--green-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    font-weight: 600;
    line-height: 1;
}

Comments

[Петр Питерский]

Пробовал не помогает(