Add Text overlay on Image

Question: How to add text overlay on Image.

Answer:

HTML Code:

<div class="container">

<img src="https://www.w3schools.com/howto/img_fjords_wide.jpg" alt="Norway" />

<div class="text">Centered </div>

</div>

CSS Code:

.container {

position: relative;
text-align: center;
color: white;

}
.container img {

width: 100%;

}
.container .text {

position: absolute;
left: 50%;
top: 50%;

}

Try it yourself: