Центрировать встроенный блок анимированного элемента ⇐ CSS

[Anonymous]

Я хочу центрировать по вертикали второй диапазон моего H1.

Я уже пытался изменить display: inline-block на display: flex, но это заставляет меня начинать анимацию в начале моего контейнера, а не в центре.

Я думаю, проблема связана с несколькими разными дисплеями, назначенными родительским элементам диапазона?

HTML

Этот элемент хорош, Но этот не по центру. CSS

.container { поле: авто 30 пикселей; цвет фона: черный; радиус границы: 1рем; дисплей: гибкий; } #описание { гибкий: 1; дисплей: гибкий; оправдание-содержание: центр; гибкое направление: столбец; белый цвет; } #description h1 span:first-child { дисплей: гибкий; оправдание-содержание: центр; семейство шрифтов: «Круассан Один»; размер шрифта: 3.2rem; белый цвет; } #description h1 span:nth-child(2) { семейство шрифтов: «Круассан Один»; размер шрифта: 3.2rem; отображение: встроенный блок; вертикальное выравнивание: по середине; переполнение: скрыто; черный цвет; цвет фона: rgb(255, 237, 36); отступ: 0 пикселей 15 пикселей; правая граница: 0,15 см, сплошной белый; пробел: nowrap; анимация: ввод шагов за 2,5 с (30), мигание-каретка 0,9 с, шаг до бесконечности; } @keyframes набираю { от { ширина: 0 } к { ширина: 52% } } @keyframes блинк-карет { 50% { цвет границы: прозрачный; } } #other-div { гибкий: 1; дисплей: гибкий; оправдание-содержание: центр; } Можете ли вы мне помочь?

Большое спасибо!