div居中 - Ivan-v

div居中

//css方式
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSS Position 定位实现 DIV 在窗口居中</title>
    <style type="text/css">
        .dialog {
            position: fixed;
            _position: absolute;
            z-index: 1;
            top: 50%;
            left: 50%;
            margin: -141px 0 0 -201px;
            width: 400px;
            height: 280px;
            border: 1px solid #CCC;
            line-height: 280px;
            text-align: center;
            font-size: 14px;
            background-color: #F4F4F4;
            overflow: hidden;
        }
    </style>
</head>
<body style="height:5000px;">
    <div class="dialog">我是css居中</div>
</body>
</html>

//js方式
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jq DIV 在窗口居中</title>
    <script src="Scripts/jquery-1.8.2.js"></script>
    <style type="text/css">
        .dialog {
            position: absolute;
            z-index: 1;
            width: 400px;
            border: 1px solid #CCC;
            line-height: 280px;
            text-align: center;
            font-size: 14px;
            background-color: #F4F4F4;
            overflow: hidden;
        }
    </style>
</head>
<body style="height:5000px;">
    <div class="dialog">我是js居中</div>
</body>
</html>
<script>
    $(function () {
        Loading($('.dialog'));
        $(window).scroll(function () {
            Loading($('.dialog'));
        });
        $(window).resize(function () {
            Loading($('.dialog'));
        });
        //弹出居中
        function Loading($obj) {
            //获取元素自身的宽度
            var L1 = $obj.width();
            //获取元素自身的高度
            var H1 = $obj.height();
            //获取实际页面的left值。（页面宽度减去元素自身宽度/2）
            var Left = (document.documentElement.clientWidth - L1) / 2;
            //获取实际页面的top值。（页面宽度减去元素自身高度/2)
            var top = (document.documentElement.clientHeight - H1) / 2 + $(document).scrollTop();
            $obj.css({ left: Left + 'px', top: top + 'px' });
        }
    })
</script>

posted on 2016-02-17 11:58 Ivan-v 阅读(278) 评论(0) 收藏举报