Как выровнять контент по центру в iFrame, размер которого зависит от размеров экрана мобильного устройства?

Question

Я пытаюсь отобразить некоторый контент через iframe.1. Высота и ширина окна iframe будут зависеть от высоты / ширины экрана мобильного устройства и, таким образом, будут зависеть от размера экрана устройства.2. Контент, рассчитанный на ширину и высоту 800px и 600px.3.В зависимости от размера экрана, содержимое будет масштабироваться с использованием 'transform: scale (x)'. Содержание будет только уменьшено, масштабирования не будет.

Теперь мне удалосьвыравнивание по центру содержимого (#container) с использованием некоторого css-кода

#container{
 position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
width:800px;
height:600px;
}

Приведенный выше CSS применяется к контейнеру, который я пытаюсь отобразить в iframe.

iFrameразмер зависит от window.innerHeight

    var iframe = document.getElementById('iframe');
        iframe.height = window.innerHeight;
        iframe.width = window.innerWidth;

Я также применяю полноэкранный режим для iframe.

 iframe.requestFullscreen();

Контейнер также уменьшается, увеличиваем высоту устройства (в альбомном режиме)

, поэтому к контейнеру применяется масштаб преобразования, основанный на этом.

Если высота экрана равна 300px,

#container{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
width:800px;
height:600px;

transform:scale(0.5);
}

Это прекрасно работает длямобильные экраны, ширина которых превышает 800 пикселей, в тех случаях, когда ширина меньше 800 пикселей, содержимое перестает выравниваться по центру относительно ширины экрана.

ПРИМЕЧАНИЕ. Содержимое, на которое я ссылаюсь, является интерактивнымdiv, мини-игракоторый использует различные позиционированные элементы.Давайте предположим, что это нельзя изменить, и только по центру 800 x 600 необходимо выровнять по центру.

Есть ли какое-то решение для этого?Я могу уточнить подробности, если потребуется.

Я бы хотел, чтобы содержимое выравнивалось по центру, даже если ширина экрана меньше 800 пикселей, при показе через iframe

Answer 1

<div class="parent">
    <iframe src="#"></iframe>
</div>   

Может быть, это:

.parent {
  display: block; //if it's for some reason something else
  text-align: center;
}
iframe {
 display: inline;
}