Horizontally and Vertically Center TextBox on Image - html

Question

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:
<div class="featured-article">
<img src="images/Image.png" alt="Image"> <!-- This Works Perfect, I don't need to touch it anymore -->
<div class="article">
<img src="uploads/4.png" alt="Image"> <!-- Image where I need to add TextBox -->
<div class="title"> <!-- TextBox that I need to center on image -->
<span><strong>TEXT</strong> TEXT</span>
</div>
.......... Other Eelements
.......... Other Eelements
.......... Other Elements
CSS:
.featured-article { /* Container of Post */
position: relative;
margin-top: 60px;
}
.featured-article > img { /* Background Image, This Works Perfect */
position: absolute;
top: -150px;
left: 20px;
z-index: -1;
}
.featured-article > .article > img { /* Image where I need to add TextBox */
width: 100%;
}
.featured-article > .article > .title > 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;
}
This should look like this: Example.

Answer 1

you can use css attribute background-image for your parent element, and inside that put your text in the child element.
after that there are many ways of positioning the child in the center of parent element...
one way would be like this:
html:
<div class="parent">
<div class="child">
your text
</div>
</div>
and css:
.parent{
background-image: url("images/Image.png");
height:...;
width:...;
}
.child{
position: absolute;
top: ....;
width: 100%;
text-align: center;
}