javascript - How to center elements of iframe embedded page.

Question

There is an element in a subpage in the iframe. I want it to be always centered as the mouse scrolls, but using the previous method, it seems to have no effect. May I ask why?

window.onload = function(){

            function box(){
                var oBox = document.getElementById("box");
                var L1 = oBox.offsetWidth;
                var H1 = oBox.offsetHeight;
                var Left = (document.documentElement.clientWidth-L1)/2;
                var top = (document.documentElement.clientHeight-H1)/2;
                oBox.style.left = Left+"px";
                oBox.style.top = top+"px";
            }
            box();
            window.onresize = function(){
            box()
        }
        }

The element whose id is box needs to be centered and position=absolute
Because the height of the element is not fixed, the js control used does not work for positioning; is there something wrong with my code or is it because the iframe page allows the element to be centered? Method not working

Answer 1

Is your iframe centered? If you want the content of the iframe to be centered, just write css. No need to write js anymore

left:50%;top:50%;margin-left:-宽度的一半，高度同理

Answer 2

It seems you have to use position=fixed