Html Text inside <div> is not showing up - html

Question

I have tried to create a card which rotates in 3D if mouse pointer hovers over it. I have successfully added the background and image of the front of the card, but when trying to add text to it (ie, when trying to add text to a div element), it is not displayed.
Erroneous html code:
<div class="front">
<div class="front_card_icon">
<img src="image/indoor_plants_icon_white.svg">
</div>
<p>THIS TEXT IS THE PROBLEM</p>
</div>
Erroneous css code:
.front {
width: 100%;
height: 100%;
overflow: hidden;
backface-visibility: hidden;
position: absolute;
transition: transform .6s linear;
background-color: #2D3436;
}
.front_card_icon{
position: relative;
bottom: 8%;
transform: scale(0.70);
z-index: 2;
}
.front p {
positon:relative;
text-align: center;
color:white;
}
According to this post, the problem should have been solved after using position:relative on the tag, but that sadly didn't resolve my problem.
This is jsfiddle for my problem. Note that there the text is properly displayed, because the image can't be loaded. However, when the image is loaded, the text is not displayed, ALTHOUGH the image is transparent.
Thank you for your time!

Answer 1

<div class="front">
<div class="front_card_icon">
<img src="image/indoor_plants_icon_white.svg">
</div>
<p>Text to be centered vertically on top of image</p>
</div>
Your p tag is below the image and so the text is being pushed down and hidden by it's parent container.
To center the text within it's parent div (minimally) you would have to:
break the p tag out of the normal flow using position: absolute (which will help position it correctly - but will also cause it to disappear behind the image)
bring the p tag back on top with z-index: 2
and centre the p tag vertically with:
position:absolute;
top: 50%;
transform: translateY(-50%);
Here is the updated fiddle
A more elegant solution might involve switching stategy and applying the image as a background. That would take the img tag out of the content flow, allowing the text to be centred without absolute positioning and z-indexing.

Answer 2

You should set your p element's position to fixed and then give it 50% of top and left :
.front p {
position:fixed;
text-align: center;
color:white;
top:50%;
left:50%;
z-index:3;
}
Here is the live result(jsfiddle).
For more information please check this.