title: Horizontally and vertically center span and image
body: <p>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.</p>
  
  <p>What I want is to have the image and text vertically and horizontally centered, with the text overlapping the image.</p>
  
  <p>I have made a JSFidlle here: <a href="https://jsfiddle.net/vw7ftzy8/1/" rel="nofollow noreferrer">https://jsfiddle.net/vw7ftzy8/1/</a></p>
  
  <p>What I eventually want is this: <a href="https://jsfiddle.net/vw7ftzy8/4/" rel="nofollow noreferrer">https://jsfiddle.net/vw7ftzy8/4/</a> (but responsive)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="text-center"&gt;
    &lt;span class="projectTest"&gt;A test project&lt;/span&gt;
    &lt;img class="projectsImage1" src="http://www.stickpng.com/assets/images/580b57fcd9996e24bc43c545.png"&gt;
    &lt;div class="projectsImage1 projectsImage1Ghost"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>