Q:

Hero Image text overlay moves around on browser resize

The I placed a couple of header tags overlaid on my hero image.  When I resize the browser the text-overlay moves up and down.  Any Ideas as to how to make the text fixed in the middle of the hero image? 
html:
    <! --Hero-->
<div id="heroimage">
    <div class="row">
        <div class="small-12 small-centered columns">
            <br>
            <div class="heroText">
                <h1>Adolfo Barreto</h1>
                <h4>Web Designer</h4>
            </div>
        </div>
    </div>  
</div>

css:
    // Hero
 html, body, #heroimage{
   width:100%;
   height:100%;
 }

.heroText {

    text-align: center;
    color: white;
    margin-top: 50%;
    margin-bottom: 50%;
}

#heroimage{   

  background: url('/../assets/img/codeHero.0.jpg') center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

My Website address is: http://adolfobarreto.atwebpages.com

A:

.heroText {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

