jQuery未知高度div垂直居中（响应式）

关注

原创最新推荐文章于 2026-03-29 03:21:17 发布 544 阅读 AI 写同款· GEO 优化 ›

jQuery响应式图片无缝切换实战教程本文还有配套的精品资源，点击获取简介：本文提供了一个分步指南，教你如何使用jQuery、HTML和CSS实现响应式的图片无缝切换效果。该效果广泛应用于现代网页设计，通过定时器定期改变图片的“活动”状态，实现平滑切换。本教程包括HTML结构、CSS样式和jQuery代码的详细讲解，并提供了完整的实战代码，帮助你掌握这一关键技术。 1. jQuery响应式图片无缝切... 阅读详情

废话不说，直接上代码

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