I want to place an Image on the absolute center of the browser window, or more specifically a
<canvas> element with an image loaded in it. Whats more I want that image to remain at the center no matter what browser resolution is applied, and even as the browser window is resized, while also maintaining the image's aspect ratio. One more caveat, the image's dimensions and aspect ratio won't be known in advanced.
I've so far got the image to center horizontally but not vertically, you can see what I have so far here http://www.dominicpettifer.co.uk/Files/ImageCenter/Test.html If you resize your browser window you'll see that the image is dynamically resized and horizontal aligned, except if you resize you browser to the narrow column the image appears at the top. I have looked at various examples online of vertical centering but none of them seem to work with my example, they seem to assume a fixed height.
Here's the the HTML: