Javascript 如何将iFrame中的内容居中对齐；s的大小取决于不同的手机屏幕大小？

我试图通过iframe显示一些内容。 1.iframe窗口的高度和宽度将取决于移动屏幕的高度/宽度，因此将根据设备屏幕大小而变化。 2.内容，在800px和600px的宽度和高度范围内设计。 3.根据屏幕大小，将使用“变换：缩放（x）”缩放内容 内容只会按比例缩小，不会发生放大

现在，我已经设法使用一些css代码将内容（#容器）居中对齐

#容器{
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
保证金：自动；
宽度：800px；
高度：600px；
}

上面的CSS应用于我试图在iframe中显示的容器

 iframe.requestFullscreen();

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);
}

这适用于宽度大于800px的移动屏幕，在宽度小于800px的情况下，内容停止中心与屏幕宽度对齐

注: 我提到的内容是一个交互式div，一个使用各种定位元素的小型游戏。假设这不能修改，只有800 x 600 div需要居中对齐

有什么解决办法吗？ 如果需要，我可以详细说明

---

我希望内容居中对齐，即使屏幕宽度小于800px，当通过iframe显示时，它不起作用，但容器也将使用“transform:scale（）”进行缩放，因此它不会是800/600，我注意到，当对齐开始中断时，它假设容器的原始宽度被考虑在内，但我找不到解决方案。

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