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;
            width: 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% \0; 　　/*兼容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>

　　

posted @ 2017-01-09 14:44  O青梅煮酒O  阅读(3516)  评论(0)  编辑  收藏  举报