Position text over an image in css - css

Question

Is there another way of placing text over an image beside using position: absolute; ?
Working with position: absolute; on different screen sizes doesn't seem like the thing i want to do.
I kept looking for an answer but all i can find about it is the classic : use position absolute.
HTML:
<div class="header-container">
<img src="https://media.sproutsocial.com/uploads/2018/04/Facebook-Cover-Photo-Size.png" alt="" id="header-img" />
<p class="img-text">Make it possible!</p>
</div>
CSS:
#header-container {
max-height: 800px;
display: flex;
align-items: center;
justify-content: center;
}
.text-header {
position: absolute;
font-family: "Gayathri", sans-serif;
font-weight: 1000;
top: 45%;
left: 45%;
}

Answer 1

Try this instead,
add this style to img
#header-img{width:100%;height:auto;}
if you align text in center by
.text-header{
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#header-container {
max-height: 800px;
display: flex;
align-items: center;
justify-content: center;
}
#header-img{width:100%;height:auto;}
.text-header {
position: absolute;
font-family: "Gayathri", sans-serif;
font-weight: 1000;
top: 50%;
left: 50%;
color: white;
font-weight:800;
font-size: 30px;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
<div class="header-container">
<img src="https://media.sproutsocial.com/uploads/2018/04/Facebook-Cover-Photo-Size.png" alt="" id="header-img" />
<p class="text-header">Make it possible!</p>
</div>

Answer 2

Technically, no.
However, you can combine a text element with position: absolute inside of an element with position: relative. This will position the element in an absolute manner (based on pixels/percentages relative to the parent element itself, rather than the entire document.
Expanding on this, you could include an image in said element (either as a background image or as another absolutely positioned div, and use percentages to position your text relative to the container.
#rel{
display: block;
position: relative;
width: 400px;
height: 600px;
}
img{
width: 100%;
height: 100%;
}
h1{
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div id="rel">
<img src="https://picsum.photos/400/600">
<h1>Hello world!</h1>
</div>