zoukankan      html  css  js  c++  java
  • position为absolute的元素如何实现居中

    当给div设置absolute时,该元素已经脱离文档流,呈现浮动状态,只能通过left,top,right,bottom来设置属性,要实现居中有两种方法:

    一、css法

    <div class="box">
    	
    </div>
    .box{ 
          100px; 
         height: 100px; 
         border:1px solid black; 
         margin:0px auto; 
         position: absolute; 
         left: 50%; 
         top:50%; 
         margin-left:-50px; 
         margin-top:-50px;
    }

    使用改方法的前提是知道元素的宽度和高度,否则只能用js了

    二、js法

    <script>

    $(document).ready(function(){
    
    var getE=$("#helpPannel").innerWidth();
    
    var getBody=$("body").outerWidth();
    
    var result=(getBody-getE)/2+"px";
    
    $("#helpPannel").css("left",result);
    
    });
    
    </script>
    
    <div id="helpPannel"></div>
    

    这里需要注意jquery中innerWidth(),outWidth(),innerHeight() ,outerHeight() 方法和window中innerWidth,outWidth,innerHeight ,outerHeight属性的区别

    jQuery innerWidth() 和 innerHeight() 方法

    innerWidth() 方法返回元素的宽度(包括内边距padding)

    innerHeight() 方法返回元素的高度(包括内边距padding)

    jQuery outerWidth() 和 outerHeight() 方法

    outerWidth() 方法返回元素的宽度(包括内边距和边框border,padding)

    outerHeight() 方法返回元素的高度(包括内边距和边框border,padding)

    window对象 innerWidth 和 innerHeight 属性

    innerheight 返回窗口的文档显示区的高度
    innerwidth 返回窗口的文档显示区的宽度

    window对象 outerWidth 和 outerHeight 属性

    outerheight 返回窗口的外部高度
    outerwidth 返回窗口的外部宽度

  • 相关阅读:
    English trip V1
    English trip V1
    第一类斯特林数
    bzoj 3601 一个人的数论
    bzoj 4407 于神之怒加强版
    bzoj 2693 jzptab
    bzoj 4184 shallot
    luogu P3920 [WC2014]紫荆花之恋
    bzoj 4269 再见Xor
    luogu P2183 [国家集训队]礼物
  • 原文地址:https://www.cnblogs.com/diantao/p/4584477.html
Copyright © 2011-2022 走看看