JQuery实现div自动垂直居中

最新推荐文章于 2021-09-08 14:57:31 发布

CCblibo

最新推荐文章于 2021-09-08 14:57:31 发布

阅读量768

点赞数

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/qq_43266465/article/details/102549668

版权

jQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

想要达到的目的：让div元素随着网页的任意改变都是居中的

先放上代码：

<!DOCTYPE html>
<html>
<head>
	<title>垂直居中</title>
	<script type="text/javascript" src="jquery.js"></script>
	<script>	
		$(window).on('load resize', function(){
			$("div").css({
				"margin-top":($(window).height() - $("div").height())/2
			});
		});
	</script>
	<style type="text/css">
		div{
			margin: auto;/*只能控制水平方向的居中*/
		}
	</style>
</head>
<body>
	<div style="width: 200px;height: 200px;background-color: yellow;"></div>
</body>
</html>

on(‘load resize’,function(){});
on();是可以让这一条语句有多个事件触发，可以理解为绑定
resize 调整浏览器窗口时触发
load 加载指定元素时触发
这里在我最开始写的时候 $(window)这些都放在了 $(documen).ready(function(){});里面，load就失效了，resize还有效

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

CCblibo

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery实现div自动垂直居中

想要达到的目的：让div元素随着网页的任意改变都是居中的先放上代码：<!DOCTYPE html><html><head> <title>垂直居中</title> <script type="text/javascript" src="jquery.js"></script> <script&g...
复制链接

扫一扫