<html>
<body>
  <div id="canvas">
    <img src="http://placehold.it/350x150" alt="A vertically centered image." />
  </div>
</body>
</html>
html, body { height: 100%; }
#canvas { text-align: center; }
var findNCenter = function() {
  var elems = document.querySelectorAll('#canvas');

  for(var i =0; i<elems.length; i++) {
    elems[i].style.marginTop = (elems[i].parentNode.offsetHeight - elems[i].offsetHeight)/2 + 'px';
  }
};

document.addEventListener && document.addEventListener('DOMContentLoaded', findNCenter);
window.addEventListener && window.addEventListener('resize', findNCenter);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.