How to responsive, vertically align image with CSS <p>I am trying to responsively &amp; vertically center an image on a page. I found several solutions online, but none are working for me. The image is stuck in the upper left hand corner. Any leads would be awesome. I'm banging my head :)</p> <p><a href="http://mccanney.net/mbhb/index.html" rel="nofollow">Here is the test page</a></p> <p><a href="http://i.stack.imgur.com/a1pma.jpg" rel="nofollow">here is an image of the desired finished page</a></p> <p><div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code> html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ background: url("http://mccanney.net/mbhb/images/bg-giraffe.jpg") no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } img.product1:empty { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt; &lt;img src="http://mccanney.net/mbhb/images/product-lg-hippo.jpg" class="product1" /&gt; &lt;/div&gt;</code></pre> </div> </div> </p>