javascript - 如何在大小取决于不同移动屏幕尺寸的 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;
}