jquery让一个div水平垂直居中

视频砖家

于 2020-11-13 14:31:40 发布

阅读量485

点赞数

CC 4.0 BY-SA版权

分类专栏：文章存档 HTML5 文章标签： jquery div具中

本文链接：https://blog.youkuaiyun.com/suny2020/article/details/109674344

文章存档同时被 2 个专栏收录

135 篇文章

订阅专栏

HTML5

49 篇文章

订阅专栏

该博客探讨了如何利用jQuery将一个div元素在页面上实现水平和垂直居中。通过检查div的位置，设置其为绝对定位，并计算窗口大小及滚动偏移，确保div在任何时候都能保持居中。此外，还提供了一个简化版的解决方案，使用CSS的`margin`属性在窗口加载或调整大小时自动居中div。

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

jquery让一个div水平垂直居中


if($("#cont1").css("position")!="fixed"){
                $("#cont1").css("position","absolute");
                var dw = $(window).width();
                var ow = $("#cont1").outerWidth();
                var dh = $(window).height();
                var oh = $("#cont1").outerHeight();
                var l = (dw - ow) / 2;
                var t = (dh - oh) / 2 > 0 ? (dh - oh) / 2 : 10;
                var lDiff = $("#cont1").offset().left - $("#cont1").position().left;
                var tDiff = $("#cont1").offset().top - $("#cont1").position().top;
                l = l + $(window).scrollLeft() - lDiff;
                t = t + $(window).scrollTop() - tDiff;
                $("#cont1").css("left",l + "px");
                $("#cont1").css("top",t + "px");

<!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>