position为absolute的元素如何实现居中

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

一、css法

<div class="box">
	
</div>

.box{ 
     width: 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 返回窗口的外部宽度

转载于:https://www.cnblogs.com/diantao/p/4584477.html