CSS centered mage miss-aligns when rotate screen from vertical to horizontal layout in mobile

Question

I have a simple webpage consisted of centered image:

<img class="centered" src="comingsoon.jpg" width="1280" height="1024" usemap="#Map" border="0" />

and CSS:

.centered {
position: fixed;
top: 50%;
left: 50%;
margin-top: -512px;
margin-left: -640px;
}

Everything looks fine, except for one problem I encounter on mobile browser:

When I load the site on android phone in vertical screen positioning site looks as intended, but when I flip the screen horizontally the centered image gets shifted down.

I understand it has something to do with the screen size change but not sure how to make it work as intended...