Center text responsively horizontally and vertically over image - css

Question

This question has already been asked several times here, but I have not found my answer.
I want to position a piece of text (only few words) center, both horizontally and vertically over an image.
The image should be an img tag and not background-image.
The text should responsively adjust it self by resizing the browser window.
(I have bootstrap in my project)
an screenshot of desired layout

Answer 1

here you go ^^
div {
position: relative;
width: 50%;
}
img {
width: 100%;
}
p {
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
margin: 0;
}
<div>
<p>ON SALE</p>
<img src="https://upload.wikimedia.org/wikipedia/en/c/c4/Original_Image_before_ASTC_compression.jpg">
</div>

Answer 2

try this ...
and check this link for more... https://css-tricks.com/text-blocks-over-image/
#container
{
height:400px;
width:400px;
position:relative;
}
#image
{
position:absolute;
left:0;
top:0;
}
#text
{
background: rgba(0, 0, 0, 0.8);
z-index:100;
position:absolute;
color:Yellow;
font-size:1.5em;
font-weight:bold;
left:150px; /* or in % */
top:150px;
}
<div id="container">
<img id="image" src="http://www.noao.edu/image_gallery/images/d4/androa.jpg"/>
<p id="text">
Hello World!
</p>
</div>

Answer 3

Try this:
.parent {
position: relative;
}
img {
width: 100%;
}
.text {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align: center;
margin: auto;
width: 20px;
height: 20px;
color: red;
}
<div class="parent">
<img src="http://s3.favim.com/610/151107/art-black-and-white-geometric-minimal-Favim.com-3533393.jpg">
<div class="text">allo</div>
</div>

Answer 4

You can achieve that with the <figure> tag. I usually set it up so the <figure> tag contains an <img> and a <div> with the text I want at the same level.
<figure>
<img src="http://stephboreldesign.com/wp-content/uploads/2012/03/lorem-ipsum-logo.jpg">
<div class="info">
Content goes here
</div> <!-- /.info -->
</figure>
And the CSS so the <figure> tag has relative positioning and the .info has absolute positioning with top: 0; bottom: 0; left: 0; right: 0 and a fixed width.
figure {
margin: 3px;
display: inline-block;
position: relative;
}
figure .info {
width: calc(100% - 30px);
height: calc(100% - 30px);
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 300ms;
background-color: rgba(233,233,233, .8);
color: #333;
margin: 15px;
text-align: center;
}
In case you may want to add more than just 1 line of text to the .info container you may use an additional <div> with the flexbox positioning.
You may see the full example here