<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<script type="text/javascript" src="js/centerJs.js" ></script>
<style>
.parent {
position: absolute;
width: 500px;
height: 300px;
border: 3px solid red;
}
.child {
width: 100x;
height: 100px;
position: absolute;
border: 2px solid black;
}
#p {
position: absolute;
width: 300px;
height: 300px;
border: 1px solid blue;
}
#c {
position: absolute;
border: 1px solid green;
}
</style>
<script>
window.onload=function () {
center();
}
window.onresize=function () {
center();
}
function center () {
var p=document.getElementsByClassName("parent")[0];
var c=document.getElementsByClassName("child")[0];
var p1=document.getElementById("p");
var c1=document.getElementById("c");
centerParent(p)
centerverticalWithEle(c,p);
centerHorizontal(p1);
centerParentWithEle(c1,p1);
}
</script>
</head>
<body style="width: 100%;height: 100%;">
<div class="parent">
父元素
<div class="child">子元素</div>
</div>
<div id="p">
父元素
<div id="c">子元素</div>
</div>
</body>
</html>
js实现水平垂直居中
需积分: 1 17 浏览量
2017-03-23
16:28:06
上传
评论
收藏 75KB ZIP 举报
水平垂直居中.zip （52个子文件） 
水平垂直居中 css img js 
centerJs.js 2KB
index.html 1KB .git HEAD 23B ORIG_HEAD 41B index 652B FETCH_HEAD 105B COMMIT_EDITMSG 43B objects 93 502c6550268f4153975159ae550b720ad6990f 301B d6 b3fef3a71dd000f0aba427a27affea42110d06 208B 42 16b29314fead12f6931e3177091012588cbf5b 89B 7bcc2e0fee5b8b9f32773c6300b15fe3c284f0 2KB 07 0cd72fdeee273a7e01ca23216313ff7235cc46 267B dd a650d83d3c8082c6c08ba0997f20800b549fae 188B 69 2d86bfe7ceba28b4e5b6781fb653038992882b 605B dfc7c378fba9fd247cd2b9cef8fd9577d3b940 162B 91 ea348e261e9af9fffeb59afecb298ce18482c9 573B pack 35 f2dd4c3730817007c10b23b56c99156f186c62 417B 0b 778a80c1458957aadc0916414a393e11a3ae15 217B 86 f01bc18b5bd82a3f55850f0848c7fef5c601cf 198B bd b0cabc87cf50106df6e15097dff816c8c3eb34 188B a2 a26c717e43e556db08081dc99c799117109d4b 207B b6 449160cebee756f67b614a4964c5cb7e3f5059 2KB 19 46b87c97e5f0d9a0de874b9754ebfca5d57aae 234B 07fc716a0e241eb26eff3f76ccce0a91d00b78 267B 89 29dfa20d3023e36c104ab66cab40bc126dedb4 4KB cd 2946ad76b4402e5b3cab9243a9281aad228670 387B 33 454b5581372082bb9189e8c93b15256f38c9f5 301B 55 fafc703b4092822fbbdfccd3b4ebb70cc95d9d 267B 14 7c52dfcd6eda40e20ec3c41f6f1da9fa7a334f 62B 9a cb132218c80525234eb42a584c77a5b492317e 167B 03 90fae16dba40bc60c6606e7a82b932822afc10 2KB 4a 07b0762a3faf94876750fcd369671491efbae0 175B 6427e7ade8f6144ba8503cf4aaba254cf18c68 207B 4e 007610d905bd04d2779c5eed42baf4882da8d9 89B be b3cd5f6241b9d7af3705875741e644c4bca8c2 267B d620b86ed9974e374fc960d945a6ad84326f1a 182B 3d 11cc424b6eab94b237fd94ad02d876e5e2beb1 709B 37 141b76811ef8176ebf0474289bd2c5d4619e36 730B 49 990d6e14503798f142dcb0d5b23cb0c8f80244 34KB 69ed58bcc4826b28b90550e81ea0cb6446b904 55B d7 7318e2cf2744d2c80aebf963c7860290c67592 177B info 2f 5eb4db282771496fd486ef8187177c31390c1a 716B bc ca5926a522f59394b3096c3527bf49c7cda558 184B description 73B config 335B info exclude 113B hooks README.sample 177B logs HEAD 2KB refs heads master 1KB remotes origin master 1KB refs tags heads master 41B remotes origin master 41B资源评论
XeonYu
- 粉丝: 1833
- 资源: 57
最新资源
- 附件2：“明白人”考试题库.zip
- 基于qt+pjsip的网络nat类型检测器+源码+文档（期末大作业&课程设计&项目开发）
- 基于linux+Python3.5+Qt实现检测到两只眼动的运动轨迹+实时绘出图+通过定时保存眼动轨迹+源码（高分优秀项目）
- 肿瘤放射物理学-带笔记版-教材推荐
- Fortran 入门教程之Hello world.pdf
- 基于QT+Opencv+C++实现的检测图片中异常物体的配置应用程序+源码（期末大作业&课程设计&项目开发）
- 软件工程-项目验收模板
- SD3314A 高效1A步进恒流LED驱动器芯片IC
- 基于微信小程序的点餐系统（若帮到你，麻烦给个五星评论）.zip
- UVa11887 Tetrahedrons and Spheres
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
