新人有问题向大家请教，如何让页面在加载登陆页时，登陆框一直居中显示？

高度已经是固定了的。。

解决方案 »

  1.   

    给框套个div　margin:0 auto;
    与宽度有染，与高度无关
      

  2.   


    <!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=utf-8" />
    <title></title>
    <style type="text/css">
    html * {margin:0;}
    html { height:100%;}
    body { height:100%;}
    #PageContaint{width:800px; border:1px solid #F00; height:400px; background-color:#FFFFFF; text-align:left;}</style>
    </head><body bgcolor="#0E4980">
    <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td align="center" valign="middle">
    <div id="PageContaint">
      <p>1111111111 </p>
      <p align="right">222222222222222</p>
      <p>1111111111 </p>
      <p align="right">222222222222222</p>
      <p>1111111111 </p>
      <p align="right">222222222222222</p>
      <p>1111111111 </p>
      <p align="right">222222222222222</p>
      <p>1111111111 </p>
      <p align="right">222222222222222</p>
      <p>1111111111 </p>
      <p align="right">222222222222222</p>
      <p>1111111111 </p>
      <p align="right">222222222222222</p>
      <p>1111111111 </p>
      <p align="right">222222222222222</p>
      <p>1111111111 </p>
      <p align="right">222222222222222</p>
    </div>
    <!--  PageContaint结束  -->
    </td>
    </tr>
    </table>
    </body>
    </html>
      

  3.   


    <!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=utf-8" />
    <title></title>
    <style type="text/css">
    html * {margin:0; padding:0;}
    body {font-family:Geneva, Arial, Helvetica, sans-serif; font-size:12px; color:#000000; background-color:#FFFFFF;}
    /*  让内容垂直居中的控制样式在下面这一行  */
    #PageMain{width:1002px; height:602px; background-color:#0E4980; margin:0 auto; position:absolute; top:50%; left:50%; margin:-301px 0 0 -501px;}
    </style>
    </head><body>
    <!--  PageMain开始  -->
    <div id="PageMain">
    </div>
    <!--  PageMain结束  -->
    </body>
    </html>最简单，但是据说有兼容性问题，需要测试
      

  4.   

    <body style="text-align: center">
    固定了高度后的DIV垂直居中
    <div style="margin:0 auto;width:200px;">
        <div style="height:200px;width:200px;border:2px solid #ddd; position: absolute;top:50%;margin-top: -100px;">
            外面的div已经水平居中<br/>
            里面的div负责垂直居中<br/>
            请调整窗口大小测试一下
        </div>
    </div>
    </body>
      

  5.   

    不用js计算高度不行
    除非是支持 height：100％的浏览器