Как наложить текст поверх картинки в CSS?

Стандартный приём: контейнеру position: relative, тексту position: absolute и центрируешь его внутри:

.banner {
  position: relative;
}
.banner img {
  width: 100%;
  display: block;
}
.banner .caption {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
}

Ключ — relative на родителе: тогда absolute у текста отсчитывается от баннера, а не от всей страницы. Часто ещё добавляют тёмную подложку, чтобы текст читался: background: rgba(0,0,0,.4) на caption или градиент.