博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js,div垂真居中
阅读量:7143 次
发布时间:2019-06-29

本文共 872 字,大约阅读时间需要 2 分钟。

<!doctype html>

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document</title>
<script type="text/javascript">
<!--
window.οnlοad=function(){
var w=document.documentElement.clientWidth,//也可以以scrollWidth,scrollWidth包括滚动条
h=document.documentElement.clientHeight;
var d=document.getElementById("popup");
var ow=d.offsetWidth,
oh=d.offsetHeight;
alert(oh);
d.style.left=(w-ow)/2+"px";
d.style.top=(h-oh)/2+"px";

}
//-->
</script>
</head>
<body>

<!--一定要设置position:absolute否则不能-->

<div id="popup" style="position:absolute;width:400px;height:400px;border:1px solid gray;">
我是猪
</div>
</body>
</html>

转载于:https://www.cnblogs.com/zhouzhou163/p/4745503.html

你可能感兴趣的文章
python numpty 中shape的用法
查看>>
浅谈C#中的结构
查看>>
java基础-this关键字
查看>>
微信公众平台注册
查看>>
[若有所悟]打造知识共享型团队
查看>>
C语言中变量的储存类别
查看>>
使用Newtonsoft将DataTable转Json
查看>>
HDU1598:find the most comfortable road(并查集 + 枚举)
查看>>
《面向模式的软件体系结构2-用于并发和网络化对象模式》读书笔记(3)--- 服务访问和配置模式...
查看>>
汇编语言描述
查看>>
移动开发学习记录
查看>>
Source Insight 使用
查看>>
java学习(一)((java编程思想)待补充)—— ·对象
查看>>
使用单元素枚举实现单例
查看>>
前端基本知识
查看>>
将excel中的数据转为json格式
查看>>
Poedu_项目2_Lesson005 课堂笔记
查看>>
字典操作
查看>>
实验2
查看>>
使用source创建一个新项目(将本地项目文件和github远程库链接)
查看>>