js 设置div 页面居中

最新推荐文章于 2025-03-19 08:30:04 发布

vincentboy

最新推荐文章于 2025-03-19 08:30:04 发布

阅读量3k

点赞数

分类专栏： js技术开发与应用文章标签： js div 居中随页面变化 ViewUI

本文链接：https://blog.youkuaiyun.com/yi_changgong/article/details/84391147

版权

js技术开发与应用专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何通过JavaScript根据页面尺寸动态调整div元素的位置，实现水平居中布局。通过设置div的position属性为absolute，并在onresize事件中计算left和height属性值，使得div始终保持在页面中央。

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




<HTML>
	<HEAD>
		<TITLE>js根据页面大小变化设置div左右居中</TITLE>
	</HEAD>
	<body>
		<div id="" style="border: solid; width: 100%; height: 100px">
			说明:js根据页面大小变化设置div左右居中, 要应用js代码，要设置position：absolute
		</div>
		<div id="mydiv"
			style="border: solid; background-color: red; width: 100px; position: absolute">
			此为居中的div
		</div>
		<!-- <div style="border:solid;height:100px;width:100px">2</div> -->
	</body>
	<script type="text/javascript">
var mydiv = document.getElementById("mydiv");
var mydiv_resize = function() {
	mydiv.style.left = (document.body.clientWidth - 100) / 2;//100为mydiv的宽度
	mydiv.style.height = document.body.clientHeight / 2;
}
mydiv_resize();
window.onresize = mydiv_resize;
</script>
</HTML>