JQuery实现子元素在父元素居中（左右、上下均居中）

最新推荐文章于 2024-01-22 21:39:04 发布

诺维茨基

最新推荐文章于 2024-01-22 21:39:04 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： Jquery 2015-05 文章标签：左右上下居中 jquery javascript 前端界面

本文链接：https://blog.youkuaiyun.com/wsm201005030226/article/details/45966581

2015-05 同时被 2 个专栏收录

2 篇文章

订阅专栏

Jquery

1 篇文章

订阅专栏

本文提供了一个JavaScript函数，用于将指定元素在父元素中实现上下左右居中。通过实例演示了如何使用该函数，并附上了最终效果的截图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

相信很多初学者朋友在学习Java前端页面的时候很困惑一个问题，如何实现一个元素在父元素中上下居中并且左右呢？

笔者上网查了一下，发现要么网上答案答非所问，要么就是很片面，仅仅实现了上下居中或者仅仅实现左右居中。

所以，特地抽了一点时间来做一个Demo，同时实现上下居中、左右居中。

	<body>
		<div id="foo" style="width: 200px; height: 200px; background: #ccc;">
			<div id="s" style="width: 50px; height: 20px; background: #ccc;">1111</div>
		</div>
		<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
		<script type="text/javascript">
			jQuery.fn.center = function(obj) {
				this.css("position", "absolute");
				this.css("top", ($(obj).height() - this.height()) / 2
					+ $(obj).scrollTop() + "px");
				this.css("left", ($(obj).width() - this.width()) / 2
					+ $(obj).scrollLeft() + "px");
				return this;
			}
			//Use the above function as:  
			$('#foo').center(window);
			$('#s').center('#foo');
		</script>

说明一下，这里实现的是id为foo的<div>在整个界面上下左右居中（父元素），id为s的<div>在id为foo的父元素<div>中实现上下左右居中。

结果如下：