Как выровнять текст по центру внутри элемента div?

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

### Вариант 1: Flexbox

```html
<div class="createButton">+</div>
```

```css
.createButton {
    display: flex;
    justify-content: center; /* Центрирование по горизонтали */
    align-items: center; /* Центрирование по вертикали */
    height: 100px; /* Установите нужную высоту */
    width: 100px; /* Установите нужную ширину */
    border: 1px solid #000; /* Для наглядности */
}
```

### Вариант 2: Grid

```html
<div class="createButton">+</div>
```

```css
.createButton {
    display: grid;
    place-items: center; /* Центрирование по горизонтали и вертикали */
    height: 100px; /* Установите нужную высоту */
    width: 100px; /* Установите нужную ширину */
    border: 1px solid #000; /* Для наглядности */
}
```

### Вариант 3: Table cell

```html
<div class="createButton">+</div>
```

```css
.createButton {
    display: table; /* Изменяем режим отображения на таблицу */
    height: 100px; /* Установите нужную высоту */
    width: 100px; /* Установите нужную ширину */
    border: 1px solid #000; /* Для наглядности */
}

.createButton::after {
    content: ""; /* Создаем псевдоэлемент для центрирования */
    display: table-cell; /* Задаем стиль как ячейка таблицы */
    vertical-align: middle; /* Вертикальное выравнивание */
    text-align: center; /* Горизонтальное выравнивание */
}
```

Выберите любой из этих методов, чтобы центрировать знак "+" по вертикали и горизонтали внутри элемента с классом `createButton` без использования отрицательных маргинов. Flexbox и Grid — наиболее современные и гибкие подходы.

Проблема может быть связана с особенностями шрифта, который используется для плюса. Попробуйте добавить свойство 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;
}