将div显示到屏幕中央

最新推荐文章于 2022-05-30 11:48:38 发布

乐由心起

最新推荐文章于 2022-05-30 11:48:38 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： JQuery

本文链接：https://blog.youkuaiyun.com/honeybaby201314/article/details/19988267

JQuery 专栏收录该内容

38 篇文章

订阅专栏

本文介绍了如何在网页中利用纯 JavaScript 和 jQuery 实现对话框的居中显示，包括两种不同方式来设置对话框的位置，并讨论了兼容性问题。

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

<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>提示信息</title>
<script type="text/javascript">
window.onload = function() {
var div = document.getElementById("showDiv");
div.style.position= "absolute";
div.style.top = (document.documentElement.scrollTop + (document.documentElement.clientHeight -div.offsetHeight) / 2)
+ "px";
div.style.left = (document.documentElement.scrollLeft + (document.documentElement.clientWidth - div.offsetWidth) / 2)+ "px";
};
</script>
</head>

</html>

　　2、下面也可以实现，不过要去掉上面的" <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> "这行代码。

　　3、如果需要解决兼容性问题，可以使用jquery，如下：

window.onload = function() {
var div = document.getElementById("showDiv");
div.style.position= "absolute";
div.style.top = (($(document).height()-div.offsetHeight) / 2)+ "px";
div.style.left = (($(document).width() - div.offsetWidth) / 2)+ "px";
};