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 返回窗口的外部宽度

  • 相关阅读:
    2014 HDU多校弟九场I题 不会DP也能水出来的简单DP题
    POJ 2208 Pyramids 欧拉四面体
    BNU 4067 求圆并
    POJ 3675 Telescope 简单多边形和圆的面积交
    POJ 2451 Uyuw's Concert(半平面交nlgn)
    [置顶] 程序员期望月薪那些事儿
    一、转正的那些事儿
    鼓膜内陷(听别人说话还震动)
    程序员的职场潜意识Top10
    年过40岁的雷军致已逝去的青春!
  • 原文地址:https://www.cnblogs.com/diantao/p/4584477.html
Copyright © 2011-2022 走看看