JS使DIV能垂直水平居中，但是加载是有问题，求解决！！！

javascriptjs.net

解决方案 »

  1.   

    先给它设置display:none;等位置调好了再show出来！
      

  2.   

    这段代码放在页面底部，就是页面加载完在显示出来的。或者明显的给个延迟也可以。<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8"/>
        <title>test</title>
        <style type="text/css">
            #ilv1{ position:absolute; display:none; width:300px; height:200px; margin:-100px 0 0 -150px; border:1px solid #ccc;}
        </style>
    </head>
    <body>
    <div id="ilv1"></div>
    <script type="text/javascript">
        function show(){
            var ilv1Div = document.getElementById("ilv1");
            var centerDiv = document.getElementById("centerBg");
            var ilv1Left = (document.documentElement.clientWidth - ilv1Div.clientWidth) / 2 + "px";
            var ilv1Top = (document.documentElement.clientHeight - ilv1Div.clientHeight) / 2 + "px";
            ilv1Div.style.display = 'block';
            ilv1Div.style.left = ilv1Left;
            ilv1Div.style.top = ilv1Top;    }
        setTimeout(function(){
            show();
        },1000);
        window.onresize=show;
    </script>
    </body>
    </html>
      

  3.   

    感觉还是不行啊，是不是我ilv1里面有listview控件的原因，ilv1的长宽是不确定的、动态的。现在看起来它是先出现在右下角，然后才跳到中间去的
      

  4.   

    用css直接设置居中 valign:center
      

  5.   

    把  show()这个函数 放在body 里面了~
    <body onload='show()'>
      

  6.   

    既然是打开页面直接显示在中间。而且也不要什么动画效果。
    直接用css定义，感觉没必要用js执行。
      

  7.   

    凡不是动态效果的，css都可以实现，楼主试着用css吧，使用javscript的document.getXX非常耗资源，出现你那种情况很正常。
      

  8.   

    1、2樓說法有點誤導display:none是沒辦法計算寬高的、更不用說計算定位了同意用css置中你可以參考一篇國外的詳細文章： http://codepen.io/shshaw/full/gEiDt