Возникли проблемы с центрированием моего iframe из-за моей <style>

Question

<style>
    #wrap { width: 600px; height: 390px; padding: 0; overflow: hidden; }
    #frame { width: 800px; height: 520px; border: 1px solid black; }
    #frame {
        -ms-zoom: 0.5;
        -moz-transform: scale(0.5);
        -moz-transform-origin: 0 0;
        -o-transform: scale(0.5);
        -o-transform-origin: 0 0;
        -webkit-transform: scale(0.5);
        -webkit-transform-origin: 0 0;
    }
</style>

<iframe id="frame" src="example.com" height="100%" width="100%"></iframe>

Выше приведен мой текущий HTML-код, который отлично работает, но я не могу разместить его по центру на странице, он просто расположен слева. Я хочу сделать это без файла CSS, чтобы я мог с легкостью использовать его в виджете, хотя я не уверен, что нужно изменить, чтобы заставить его двигаться. Заранее спасибо!

Answer 1

Есть много способов сделать это, вы можете сделать это, установив позицию iFrame в абсолютное значение, а верхнее и влево на 50%. Как показано ниже:

<iframe id="frame" style="position: absolute; top: 50%; left: 50%;" src="example.com" height="100%" width="100%"></iframe>