CSS-центрированный маг неправильно выравнивается при повороте экрана с вертикального на горизонтальный макет в мобильном телефоне
У меня есть простая веб-страница, состоящая из центрированного изображения:
<img class="centered" src="comingsoon.jpg" width="1280" height="1024" usemap="#Map" border="0" />
и CSS:
.centered {
position: fixed;
top: 50%;
left: 50%;
margin-top: -512px;
margin-left: -640px;
}
Все выглядит хорошо, за исключением одной проблемы, с которой я сталкиваюсь в мобильном браузере:
Когда я загружаю сайт на телефон Android в вертикальном положении, сайт выглядит так, как задумано, но когда я переворачиваю экран по горизонтали, центрированное изображение смещается вниз.
Я понимаю, что это как-то связано с изменением размера экрана, но не уверен, как заставить его работать как задумано...