DIV水平垂直居中的CSS兼容写法

时间：2021-01-04 19:16:26

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>

　　

相关文章