Aby ustawić tekst na środku zdjęcia można nadać dla tekstu pozycje absolutną względem img. Oznacza to, że img musi mieć pozycje inna niż static np. relative. I wtedy mamy możliwość użyć właściwości top oraz left dla tekstu względem img.
<div id="photo" class="photo">
<img src="https://banner2.cleanpng.com/20180822/alk/kisspng-logo-product-design-brand-data-stannum-technologies-custom-solutions-real-result-5b7d98a5f024f3.5383849615349577339836.jpg" width="100%" height="">
<span class="photo_description">HTML i CSS</span>
</div>
.photo{
position: relative;
}
.photo_description{
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
color: #000;
font-size: calc(1vw + 1vh + 5vmin);
}
margin-right: -50%; jest wymagany, aby wyrównać parametr left: 50%, który zmniejsza o połowę dostępną dla elementu szerokość. Czyli jeżeli szerokość okna będzie mniejsza niż szerokość tekstu x2 to tekst nie będzie się zwijał.