Mobile Friendly Site with centered text in img in div - html

Question

I need to create a responsive layout, wherein basically I have an image in center of screen, and text centered in the image.
I'm not sure how exactly to center all these things properly. I tried making the image a background-image in a div, but couldn't center it while making sure it'd grow/shrink as a screen did.
Now I'm not sure how to make it all very contained, without overflowing, and without setting a px size (which a lot of the help articles I've found specify).
This is my idea:
On my website at the moment I've made part of it work and it looks like this:
Except I need it also to be centered vertically and the span is as wide as the screen rather than as wide as the image.
https://jsfiddle.net/zb50azjx/
HTML:
<div class="news">
<div><img src="http://m.elysiumrpg.com/images/newstitle.png"/><span>News Title</span></div>
</div>
CSS:
.news {
color: #191919;
font-size: 15pt;
}
.news div img {
z-index: 0;
margin-left: auto;
margin-right: auto;
position: relative;
display: inline-block;
}
.news div span {
z-index: 1;
position: absolute;
text-align:center;
left: 0;
width: 100%;
color: #000000;
}

Answer 1

.news {
color: #191919;
font-size: 15pt;
display:inline-block;
width: 100%;
position: relative;
}
.news div img {
z-index: 0;a
width: 100%;
margin-left: auto;
margin-right: auto;
position: relative;
display: inline-block;
}
.news div span {
z-index: 1;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
top: 50%;
position: absolute;
left: 0;
width: 100%;
text-align: center;
}
<div class="news">
<div><img src="http://m.elysiumrpg.com/images/newstitle.png"/><span>News Title</span></div>
</div>

Answer 2

you can make div within news as position relative and span as position:absolute and set top:40% and left:40% this would give you the text centered within the image
.news {
color: #191919;
font-size: 15pt;
}
div.content {
width: 100%;
position: relative;
}
.news div span {
position: absolute;
top: 40%;
left: 40%;
color: #000000;
}
<div class="news">
<div class="content">
<img src="http://m.elysiumrpg.com/images/newstitle.png" /><span>News Title</span>
</div>
</div>
Hope this helps

Answer 3

I'm not 100% clear on what text you want centered on the image but see if this is what you are after:
http://codepen.io/panchroma/pen/gLEGqb
Using a background image with CSS of background-size:contain; can be really useful sometimes, because it will scale the image well to fit the size of the div
I've simplified your HTML and CSS quite a bit.
Good luck
HTML
<div class="news">News Title </div>
CSS
.news {
color: #191919;
font-size: 15pt;
background:url('http://m.elysiumrpg.com/images/newstitle.png') ;
background-size:contain;
text-align:center;
padding:20px 0;
}