Jqury 块在window窗口居中

最新推荐文章于 2019-10-31 16:39:28 发布

bairan9926

最新推荐文章于 2019-10-31 16:39:28 发布

阅读量95

点赞数

原文链接：http://www.cnblogs.com/July-/p/5796658.html

版权

1.块在父容器里居中常用方法——

            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -250px;
            margin-top: -200px;
            width: 500px;
            height: 400px;

　　其中：

margin-left: -250px; /* 元素本身文档宽度的一半*/
margin-top: -200px /* 元素本身文档高度的一半*/

/*  注意-有滚动条时：这种居中必须滚动条滑到中间，效果不好 */

2 块在window窗口居中

<body>
    <div class="con">
        <form class="show">
           用户名： <input type="text" name="name" id=""/>
        </form>
    </div>
</body>

<script src="jquery-3.0.0.js"></script>
<script>
    $( function(){
//初始化
        $("form").css("top",  $(window).height()/2+"px");
        $("form").css("left",  $(window).width()/2+ "px");
        $("form").css("margin-top",-200+ "px");
        $("form").css("margin-left",-250+"px")
//滚动事件 窗口大小变化事件
        $(window).on("resize  scroll",  function () {
            $("form").css("top",  $(window).height()/2+"px");
            $("form").css("left",  $(window).width()/2+ "px");
            $("form").css("margin-top",-200+ document.body.scrollTop+"px");
            $("form").css("margin-left",-250+  document.body.scrollLeft+"px")
        })
    });


</script>

       body{
            width: 2000px;
            height: 2800px;
        }


        .con form{
 /*   在指定父容器 里面居中*/
/*           left: 50%;
            top: 50%;
            margin-left: -250px;
            margin-top: -200px;*/
            position: absolute;
            width: 500px;
            height: 400px;
            background: rgba(255,0,0,0.5);
         }

转载于:https://www.cnblogs.com/July-/p/5796658.html

bairan9926

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jqury 块在window窗口居中

1.块在父容器里居中常用方法—— position: absolute; left: 50%; top: 50%; margin-left: -250px; margin-top: -200px; width: 500px...
复制链接

扫一扫