怎样让一个层在不同分辨率的显示器上都居中显示

怎样让一个层在不同分辨率的显示器上都居中显示

解决方案 »

  1.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <style type="text/css">
    html, body{
    width:100%; height:100%; margin:0px; padding:0px;
    }
    #t{
    width:200px; height:100px; border:1px solid #006699; background:#F5F6FB; color:#006699;
    }
    </style>
    <script type="text/javascript">
    window.onload = function(){
    var div = document.getElementById("t");
    div.style.position = "absolute";
    div.style.left = ((document.body.clientWidth || document.documentElement.clientWidth) - div.offsetWidth) / 2 + "px";
    div.style.top = ((document.body.clientHeight || document.documentElement.clientHeight) - div.offsetHeight) / 2 + "px";
    };
    </script>
    </head><body>
    <div id="t">
    1111111111
    </div>
    </body>
    </html>
      

  2.   

    晕，还用什么JS啊
    直接CSS搞定
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title><style type="text/css">
    body{
        margin:0px auto; padding:0px;
    }
    #t{
        width:200px; height:100px; border:1px solid #006699; background:#F5F6FB; color:#006699;
    margin:0px auto;padding:0px;
    }
    </style>
    </head><body><div id="t">
        1111111111
    </div>
    </body>
    </html>
      

  3.   

    上下居中？还是左右居中？还是屏幕居中？
    屏幕居中的话，就JS吧
    CSS不知道可以没
      

  4.   

    呵呵，屏幕居中貌似也可以用CSS你试试
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title><style type="text/css">
    body{
        margin:0px auto; padding:0px; width:100%; height:100%;
    }
    #t{
        width:200px; height:100px; border:1px solid #006699; background:#F5F6FB; color:#006699;
        margin:0px auto;padding:0px;
    position:absolute;
    left:40%;
    top:40%;
    }
    </style>
    </head><body><div id="t">
        1111111111
    </div>
    </body>
    </html>
      

  5.   

    呵，用CSS在实际项目中可能会有问题．
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <style type="text/css">
    html, body{
    width:100%; height:100%; margin:0px; padding:0px;
    }
    #t{
    position:absolute; left:50%; top:50%; margin-left:-100px; margin-top:-50px;
    width:200px; height:100px; border:1px solid #006699; background:#F5F6FB; color:#006699;
    }
    </style>
    </head><body>
    <div id="t">
    1111111111
    </div>
    </body>
    </html>