• HTML中 div垂直居中


    参考:http://bbs.blueidea.com/viewthread.php?tid=1906314

    比较简单的方法:

    删掉:
    <!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">
    <body>
    <div style="background:blue;position:absolute;left:expression((body.clientWidth-50)/2);top:expression((body.clientHeight-50)/2);50;height:50"></div>

    比较复杂的方法:

    <!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>:::::::::16ue.cn:::::::::</title>
    <style>
    body {padding: 
    0; margin: 0;}
    body,html{height: 
    100%;}
    #outer {height: 
    100%; overflow: hidden; position: relative; 100%; background:ivory;}
    #outer[id] {display: table; position: 
    static;}
    #middle {position: absolute; top: 
    50%;} /* for explorer only*/
    #middle[id] {display: table
    -cell; vertical-align: middle; position: static;}
    #inner {position: relative; top: 
    -50%; 400px;margin: 0 auto;} /* for explorer only */
    div.greenBorder {border: 1px solid green; background
    -color: ivory;}
    </style>
    </head>
    <body>
    <div id="outer">
    <div id="middle">
    <div id="inner" class="greenBorder">未知高度下的垂直居中
    </div>
    </div>
    </div>
    </body>
    </html>

    expression比较消耗资源,例子:

    <input value="0" style="af:expression(value++);">

  • 相关阅读:
    行列式学习笔记
    二项式反演学习笔记
    【AtCoder】ARC096(C
    【LOJ】#2127. 「HAOI2015」按位或
    [ACM] POJ 1218 THE DRUNK JAILER (关灯问题)
    lua的弱弱引用表
    西班牙式软件团队
    【DRP】採用dom4j完毕XML文件导入数据库
    基于Linux平台病毒Wirenet.c解析
    【剑指offer】异或去重
  • 原文地址:https://www.cnblogs.com/zhangsir/p/1297912.html
Copyright © 2020-2023  润新知