Centering Text over Image using Foundation -

so i'm trying seems simple thing, yet can't seem work...center text on image. want image scale entire width of screen, no white space on either side, , scale height let's 30% of screen, , put text right in center of image.

i created show problem: https://jsfiddle.net/sq9we118/

i've tried:

text-align: center; 

^^ nothing.

also:

top: 50%; left: 50%; 

^^which moves text on 50%, not move down @ all.

i've tried more this, can't remember did. i've tried multiple 'div' setups image , text in same div, separate divs, text in separate div, various css settings found answers on site others similar problem, none have worked me.

i'm using foundation, if makes difference. tried without foundation, , couldn't image scale 100% width of screen without left , right white space.

also also, can see, have:

width: 100%; height: 15em; 

for image. if change height %, image disappears. can pixels both, want image scale screen sizing.

i'm new web development, pretty demoralizing, since can't these 2 simple problems solved, lol. guys(and gals).

the css-tricks site has a fantastic guide on how center css should able in future. i've created a fiddle possible solution problem; i've pasted css below.

.image {     position: relative; }  img.big_image {     position: absolute;     width: 100%;     height: 15em; }  div.overlay_text {     position: absolute;     color: red;     font-weight: bold;     font-size: 48px;     left: 0;     text-align: center;     top: 80px;     width: 100%; }