Html center align вертикально не работает

Удалите встроенный стиль, используйте flexbox с flex-direction: column; justify-content: center; и text-align center; в нижнем колонтитуле.

.footer {
  background-color: #2E7FB6;
  color:white;
  height:50px;
  text-align: center;
  
  display: flex;
  flex-direction: column;
  justify-content: center;
}

<div class = "footer">
    <section>FETCHED: {{ recordsFetched }} Work Order(s)</section>
</div>

Используйте подсказки flexbox, скажите только @ rprm192. Но если вы хотите сделать его более простым и поддерживать старый браузер, вы можете использовать line-height. Вот вам код

.footer {
  height: 50px;
}
.footer section {
  height: 100%;
  line-height: 50px; //make it same as height value
}