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

Just add one class to parent container, make it's position relative.

.img-container {
  position:relative;
}

And then make homeImageLink absolute and give top at around 45%..

It will make it vertically centered..

.homeImageLink {
   position: absolute; 
   top: calc(50% - 24px); //24px is font size of H1 I assume 
   left: 0;
   text-align: center; 
   width: 100%; 
}

Demo here : http://codepen.io/anon/pen/bJadE