如何在尺寸取决于不同移动屏幕尺寸的 iFrame 中居中对齐内容？

Question

我正在尝试通过 iframe 显示一些内容。 1. iframe 窗口的高度和宽度将取决于移动屏幕的高度/宽度，因此会根据设备屏幕尺寸而有所不同。 2.内容，设计在800px和600px的宽高范围内。 3.根据屏幕尺寸，内容将使用'transform:scale(x)'进行缩放 内容只会缩小，不会放大。

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

#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 的 div 需要居中对齐。

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

我希望内容居中对齐，即使屏幕宽度小于 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;
}