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

标签：

当给div设置absolute时，该元素已经脱离文档流，呈现浮动状态，只能通过left，top，right，bottom来设置属性，要实现居中只能通过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 返回窗口的外部宽度

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

标签：

原文地址：http://www.cnblogs.com/diantao/p/4584477.html