Замечаю, что когда речь заходит о вертикальном центрировании элементов внутри блочного контейнера, в большинстве случаев предлагается изменить тип отображения контейнера на flex, реже - на grid.

Если вертикальное центрирование дочерних элементов это единственная причина изменения типа отображения для блочного контейнера, то целесообразнее восспользоваться свойством align-content. Это свойство знакомо тем, кто использует в проектах модули раскладки Flexible Box или CSS Grid Layout, но оно доступно и для Block-level content элементов.

В случае с блочными элементами свойство align-content задаёт выравнивание по вертикальной оси - именно то, что нужно для достижения требуемого результата при вертикальном центрировании.

Например, в следующем примере показана HTML разметка для блочного элемента #example, содержащего дочерний блочный элемент с текстом.

<div id="example">
  <div>Я ❤ CSS</div>
</div>

Следующий CSS код задаст минимальную высоту для блочного контейнера #example и установит вертикальное центрирование его дочернего элемента.

#example {
  min-height: 6em;
  align-content: center;
}

Почему важно задать высоту для контейнера? Дело в том, что если высота контейнера будет равна высоте его дочерних элементов, смысл использования вертикального центрирования теряется, визуального эффекта не будет.

Если требуется выровнять текст внутри дочернего блочного элемента контейнера по горизонтали, достаточно добавить контейнеру свойство text-align: center;.

Считаю, что в рассмотренном примере отказ от распространённой практики использования свойств display: flex; или display: grid; для контейнера, является хорошей практикой, которой следует придерживаться для сохранения контекста форматирования для HTML элементов.