jQuery未知高度div垂直居中（響應式）

廢話不說，直接上代碼

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