title: Horizontally and Vertically Center TextBox on Image
body: <p>I'm trying to make one blog design, and I want to display text on image that is vertically and horizontally centered. My CSS class .featured-article have relative position. This is HTML and CSS:</p>
  
  <pre><code>&lt;div class="featured-article"&gt;
    &lt;img src="images/Image.png" alt="Image"&gt; &lt;!-- This Works Perfect, I don't need to touch it anymore --&gt;
      &lt;div class="article"&gt;
        &lt;img src="uploads/4.png" alt="Image"&gt; &lt;!-- Image where I need to add TextBox --&gt;
        &lt;div class="title"&gt; &lt;!-- TextBox that I need to center on image --&gt;
          &lt;span&gt;&lt;strong&gt;TEXT&lt;/strong&gt; TEXT&lt;/span&gt;
        &lt;/div&gt;
        .......... Other Eelements
        .......... Other Eelements
        .......... Other Elements
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.featured-article { /* Container of Post */
    position: relative;
    margin-top: 60px;
  }
  
  .featured-article &gt; img { /* Background Image, This Works Perfect */
    position: absolute;
    top: -150px;
    left: 20px;
    z-index: -1;
  }
  
  .featured-article &gt; .article &gt; img { /* Image where I need to add TextBox */
    width: 100%;
  }
  
  .featured-article &gt; .article &gt; .title &gt; span { /* TextBox that I need to center on image */
    background-color: #9ED7D8;
    padding: 25px 35px 25px 35px;
    text-transform: uppercase;
    max-width: 800px;
    font-size: 30px;
    font-weight: 300;
    color: #FFF;
  }
  </code></pre>
  
  <p>This should look like this: <a href="https://i.stack.imgur.com/xga1I.png" rel="nofollow noreferrer">Example</a>.</p>