废话不说,直接上代码
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
#outer{
width:100%;
height:50%;
margin: 50px auto;
border:1px solid #CCC;
position:relative;
}
#inner{
position:relative;
border:1px solid #fdf;
height:20%;
width:20%;
left:50%;
top:50%;
}
</style>
<div id="outer">
<div id="inner"><div>
</div>
<script>
$(document).ready(function(){
change();
});
function change(){
var v1 = - ($("#inner").width())/2;
var v2 = - ($("#inner").height())/2;
$("#inner").css({'margin-left':v1,'margin-top':v2})
}
$(window).resize(function(){
change();
});
</script>
原理:
当文档加载或窗口resize事件触发时,调用change()方法。
change 方法,首先取得 inner元素的宽高,再设置它的负margin.
tips: 如果inner已知宽高,就不需要这么麻烦啦!请前往CSS div垂直居中