纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示


Posted in Javascript onSeptember 12, 2015

下文以span元素为例子,介绍一下如何实现span元素在div中实现水平垂直居中效果,代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>三水点靠木</title>
<style type="text/css">
#box{
 width:200px;
 height:150px;
 background:blue;
 position:relative;
}
#antzone{
 background:green;
}
</style>
<script type="text/javascript">
window.onload=function(){
 var obox=document.getElementById("box");
 var oantzone=document.getElementById("antzone");
 var w=oantzone.offsetWidth;
 var h=oantzone.offsetHeight;
 oantzone.style.position="absolute";
 oantzone.style.left="50%";
 oantzone.style.top="50%";
 
 oantzone.style.marginLeft=-(w/2)+"px";
 oantzone.style.marginTop=-(h/2)+"px";
}
</script>
</head>
<body>
<div id="box">
 <spanj id="antzone">三水点靠木</span>
</div>
</body>
</html>

上面你的代码实现了span元素在div中垂直水平居中效果,下面简单介绍一下它的实现过程。

一.实现原理:

虽然css为明确给出span元素的尺寸,但是它毕竟有一个尺寸的,这个尺寸可以使用offsetWidth和offsetHeight属性获取,然后将此span元素设置为绝对定位,然后再将left和top属性值分别设置为50%,但是这个时候并不是span元素的中心点垂直水平居中,而是span元素的左上角垂直水平居中,然后在设置span元素的负的外边距,尺寸是span元素宽高的一半,这样就实现了垂直水平居中效果。

以上就是本文的全部内容,今天就到此为止,后续给大家更新scrollTop、offsetHeight和offsetTop等属性用法详解,请持续关注本站,谢谢。

Javascript 相关文章推荐
JavaScript中实现map功能代码分享
Jun 11 Javascript
Express的路由详解
Dec 10 Javascript
浅析JavaScript 箭头函数 generator Date JSON
May 23 Javascript
Form表单按回车自动提交表单的实现方法
Nov 18 Javascript
ES6概念 ymbol.for()方法
Dec 25 Javascript
javascript数据类型详解
Feb 07 Javascript
ECMAscript 变量作用域总结概括
Aug 18 Javascript
详解在vue-cli中使用路由
Sep 25 Javascript
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 jQuery
JavaScript ES2019中的8个新特性详解
Feb 20 Javascript
微信小程序如何调用图片接口API并居中显示
Jun 29 Javascript
原生js实现自定义难度的扫雷游戏
Jan 22 Javascript
JS实现超精简响应鼠标显示二级菜单代码
Sep 12 #Javascript
JS+CSS实现的简单折叠展开多级菜单效果
Sep 12 #Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
Sep 12 #Javascript
jquery实现最简单的滑动菜单效果代码
Sep 12 #Javascript
jQuery实现自动切换播放的经典滑动门效果
Sep 12 #Javascript
JavaScript中this的9种应用场景及三种复合应用场景
Sep 12 #Javascript
javascript判断网页是关闭还是刷新
Sep 12 #Javascript
You might like
晶体管单管来复再生式收音机
2021/03/02 无线电
ThinkPHP路由详解
2015/07/27 PHP
让GoogleCode的SVN下的HTML文件在FireFox下正常显示.
2009/05/25 Javascript
javascript preload&amp;lazy load
2010/05/13 Javascript
使用js检测浏览器的实现代码
2013/05/14 Javascript
javascript使用shift+click实现选择和反选checkbox的方法
2015/05/04 Javascript
javascript中闭包概念与用法深入理解
2016/12/15 Javascript
深入对Vue.js $watch方法的理解
2017/03/20 Javascript
Angularjs上传文件组件flowjs功能
2017/08/07 Javascript
基于jQuery实现Ajax验证用户名是否可用实例
2018/03/25 jQuery
JavaScript fetch接口案例解析
2018/08/30 Javascript
javascript实现文字跑马灯效果
2020/06/18 Javascript
[01:08:29]DOTA2-DPC中国联赛定级赛 RNG vs Aster BO3第一场 1月9日
2021/03/11 DOTA
Python使用百度API上传文件到百度网盘代码分享
2014/11/08 Python
Python对数据库操作
2016/03/28 Python
Python入门_浅谈for循环、while循环
2017/05/16 Python
详解python里使用正则表达式的分组命名方式
2017/10/24 Python
手把手教你python实现SVM算法
2017/12/27 Python
Python基于列表模拟堆栈和队列功能示例
2018/01/05 Python
浅谈Pandas中map, applymap and apply的区别
2018/04/10 Python
python读取和保存图片5种方法对比
2018/09/12 Python
如何用Python做一个微信机器人自动拉群
2019/07/03 Python
django-crontab实现服务端的定时任务的示例代码
2020/02/17 Python
Python3 ID3决策树判断申请贷款是否成功的实现代码
2020/05/21 Python
python如何调用字典的key
2020/05/25 Python
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享
2016/05/17 HTML / CSS
上班睡觉检讨书
2014/01/09 职场文书
文明美德伴我成长演讲稿
2014/05/12 职场文书
保护环境倡议书300字
2014/05/19 职场文书
2015婚礼主持词开场白
2015/05/28 职场文书
老乡会致辞
2015/07/28 职场文书
领导干部学习十八届五中全会精神心得体会
2016/01/05 职场文书
学习《中小学教师职业道德规范》心得体会
2016/01/18 职场文书
初二数学教学反思
2016/02/17 职场文书
Python 数据可视化之Seaborn详解
2021/11/02 Python
利用Python多线程实现图片下载器
2022/03/25 Python