How can I vertically center text over a responsive image?

Question

How can I get the caption text on these images to move around when then the browser window is resized? My implementation is jicky and I need a way to keep the text from sliding

Answer 1

I came up with another solution, here's a working demo:

http://codepen.io/niente0/pen/jyzdRp

HTML:

     

     
THIS IS A TEST

CSS:

HTML,BODY {
  max-width:1200px;
}
.wrapper {
  position:relative;
  width:100%;
  max-width:1200px;
  height:100%;
  min-height:320px
}
.divimage {  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:url(https://thumbs.dreamstime.com/t/empty-red-banner-corners-ropes-textile-white-background-d-illustration-70434974.jpg);
  background-repeat:no-repeat;
  background-size:100% auto;
}
.divtext {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  padding-top:13.5%;  
  text-align:center;
  font-weight:bold;
  font-size:5vw;
  color:white;
  font-family:arial;
}
@media (min-width: 1200px) {
  .divtext{
    font-size:60px;
  }
}