Horizontally and vertically center span and image - html

Question

I'm stuck with this problem that takes me forever, I am making a portfolio website and I want to display the projects that I have done. I'm messing around with positions and centering but I can't seem to get it right.
What I want is to have the image and text vertically and horizontally centered, with the text overlapping the image.
I have made a JSFidlle here: https://jsfiddle.net/vw7ftzy8/1/
What I eventually want is this: https://jsfiddle.net/vw7ftzy8/4/ (but responsive)
.projectTest {
color: white;
padding: 10px 40px;
background-color: rgba(0, 0, 0, 0.4);
font-weight: 600;
font-style: italic;
font-size: 56px;
position: absolute;
z-index: 999;
}
.projectsImage1 {
height: 200px;
width: auto;
position: absolute;
}
.projectsImage1Ghost {
visibility: hidden;
position: relative;
}
.text-center {
position: relative;
text-align: center;
background-color:yellow;
}
<div class="text-center">
<span class="projectTest">A test project</span>
<img class="projectsImage1" src="http://www.stickpng.com/assets/images/580b57fcd9996e24bc43c545.png">
<div class="projectsImage1 projectsImage1Ghost"></div>
</div>

Answer 1

Assuming you do not need to support old versions of IE, I would use a flexbox for class .text-center
Browser support for flexbox here
More information on flexbox here
.projectTest {
color: white;
padding: 10px 40px;
background-color: rgba(0, 0, 0, 0.4);
font-weight: 600;
font-style: italic;
font-size: 56px;
position: absolute;
z-index: 999;
}
.projectsImage1 {
height: 200px;
width: auto;
position: absolute;
}
.projectsImage1Ghost {
visibility: hidden;
position: relative;
}
.text-center {
position: relative;
background-color: yellow;
display: flex;
align-items: center;
justify-content: center;
}
<div class="text-center">
<span class="projectTest">A test project</span>
<img class="projectsImage1" src="http://www.stickpng.com/assets/images/580b57fcd9996e24bc43c545.png">
<div class="projectsImage1 projectsImage1Ghost"></div>
</div>

Answer 2

If the height of all the images is known (I'm seeing that you have used 200px as a height), you can use CSS transform using the translate function (IE9+). This property when is applied in percents, take into account the size of the element instead of the size of its parent:
.text-center {
background-color: yellow;
height: 200px;
position: relative;
text-align: center;
width: 100%;
}
.projectTest {
background-color: rgba(0, 0, 0, 0.4);
color: white;
font-weight: 600;
font-style: italic;
font-size: 56px;
left: 50%;
padding: 10px 40px;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
white-space: nowrap;
z-index: 999;
}
.projectsImage1 {
height: 100%;
left: 50%;
position: absolute;
transform: translateX(-50%);
width: auto;
}
<div class="text-center">
<span class="projectTest">A test project</span>
<img class="projectsImage1" src="http://www.stickpng.com/assets/images/580b57fcd9996e24bc43c545.png">
</div>