zoukankan      html  css  js  c++  java
  • Jqury 块在window窗口居中

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

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

      

  • 相关阅读:
    第四章:初识CSS3
    第三章:表单
    第二章:列表、表格与媒体元素
    人机猜拳
    类的无参方法
    javadoc
    类与对象
    vuex笔记
    vi 编辑器常用快捷键
    知识点笔记(二维数组排序、统计数组重复个数、)
  • 原文地址:https://www.cnblogs.com/July-/p/5796658.html
Copyright © 2011-2022 走看看