废话不说，直接上代码

<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垂直居中