zoukankan      html  css  js  c++  java
  • DIV水平垂直居中的CSS兼容写法

    DIV水平垂直居中,非IE浏览器可以用CSS3来处理,IE浏览器中分别处理IE6和/IE7、IE8、IE9。

    在IE低版本中,虽然大致上没有问题,但还是有一些细微的显示问题。

    示例如下: 

    <!DOCTYPE html>
    <html>
    <head>
        <title>DIV水平垂直居中 </title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style type="text/css">
            body {
                font-size: 12px;
                font-family: tahoma;
                margin: 10px;
                padding:0;
            }
    
            .box {
                border: 1px solid #f09;
                background-color: #fcf;
                 520px;
                height: 360px;
                position: relative;
                overflow: hidden;
            }
    
            .sub-box {
                position: absolute;
                top: 50%;
                left: 50%;
                margin: auto;
                -webkit-transform: translate(-50%,-50%);
                -ms-transform: translate(-50%,-50%);
                transform: translate(-50%,-50%);
            }
    
            .con {
                *position: relative;   /* 星号兼容 IE6/IE6 */
                *top: -50%;
                *left: -50%;
                margin: -50% 50% -50% -50% ;   /*兼容IE8(IE9也受影响,在下面处理掉IE9)*/
                border: solid 1px #f00;
            }
            :root .con {
                margin: auto;  /*兼容处理IE9*/
            }
        </style>
    </head>
    <body>
        <div id="ver"></div>
        <div class="box">
            <div class="sub-box">
                <div class="con">
                    DIV垂直居中<br />
                    水平居中、垂直居中<br />
                    水平居中、垂直居中<br />
                    水平居中、垂直居中<br />
                    水平居中、垂直居中<br />
                    水平居中、垂直居中<br />
                    水平居中、垂直居中
                </div>
            </div>
        </div>
    </body>
    </html>
    <script type="text/javascript">
      //显示浏览器版本
        document.getElementById('ver').innerHTML = navigator.userAgent;
    </script>
    

      

  • 相关阅读:
    浅析MySQL二进制日志
    MySQL升级
    浅析MySQL复制
    MySQL关于exists的一个bug
    TokuDB存储引擎
    MySQL中RESET SLAVE和RESET MASTER的区别
    MySQL半同步复制
    MySQL线程池
    分析MariaDB初始化脚本mysql_install_db
    Python装饰器
  • 原文地址:https://www.cnblogs.com/oukunqing/p/6265236.html
Copyright © 2011-2022 走看看