纯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 相关文章推荐
JQuery的ajax基础上的超强GridView展示
Sep 18 Javascript
node.js开发中使用Node Supervisor实现监测文件修改并自动重启应用
Nov 04 Javascript
JavaScript数组Array对象增加和删除元素方法总结
Jan 20 Javascript
jQuery解析与处理服务器端返回xml格式数据的方法详解
Jul 04 Javascript
Bootstrap中点击按钮后变灰并显示加载中实例代码
Sep 23 Javascript
JavaScript用JSONP跨域请求数据实例详解
Jan 06 Javascript
微信小程序 获取javascript 里的数据
Aug 17 Javascript
从源码看angular/material2 中 dialog模块的实现方法
Oct 18 Javascript
bootstrap3中container与container_fluid外层容器的区别讲解
Dec 04 Javascript
Vue数据绑定简析小结
May 07 Javascript
JS函数参数的传递与同名参数实例分析
Mar 16 Javascript
通过实例解析jQ Ajax操作相关原理
Sep 23 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
第十二节 类的自动加载 [12]
2006/10/09 PHP
phpExcel导出大量数据出现内存溢出错误的解决方法
2013/02/28 PHP
详细解读PHP的Yii框架中登陆功能的实现
2015/08/21 PHP
PHP实现随机发扑克牌
2020/04/22 PHP
javascript字典探测用户名工具
2006/10/05 Javascript
利用JS重写Cognos右键菜单的实现代码
2010/04/11 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
2010/09/03 Javascript
javascript学习基础笔记之DOM对象操作
2011/11/03 Javascript
JavaScript的漂亮的代码片段
2013/06/05 Javascript
js实现倒计时(距离结束还有)示例代码
2013/07/24 Javascript
js实现照片墙功能实例
2015/02/05 Javascript
js基于cookie记录来宾姓名的方法
2016/07/19 Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
2017/01/23 Javascript
原生js实现轮播图的示例代码
2017/02/20 Javascript
js实现适配不同的屏幕大小
2017/04/10 Javascript
详解组件库的webpack构建速度优化
2018/06/18 Javascript
Nodejs 识别图片类型的方法
2019/08/15 NodeJs
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
2020/12/02 Vue.js
Python实现的质因式分解算法示例
2018/05/03 Python
python实现守护进程、守护线程、守护非守护并行
2018/05/05 Python
python引用(import)某个模块提示没找到对应模块的解决方法
2019/01/19 Python
Django模型序列化返回自然主键值示例代码
2019/06/12 Python
python使用python-pptx删除ppt某页实例
2020/02/14 Python
python虚拟环境模块venv使用及示例
2020/03/04 Python
如何解决python多种版本冲突问题
2020/10/13 Python
Python操作word文档插入图片和表格的实例演示
2020/10/25 Python
CSS3中各种颜色属性的使用教程
2016/05/17 HTML / CSS
Darphin迪梵官网: 来自巴黎,植物和精油调制的护肤品牌
2016/10/11 全球购物
Eyeko美国:屡获殊荣的睫毛膏、眼线笔和眉妆
2018/07/05 全球购物
精致的手工皮鞋:Shoe Embassy
2019/11/08 全球购物
应届生自荐信范文
2014/02/21 职场文书
《蚕姑娘》教学反思
2014/04/15 职场文书
学习普通话的体会
2014/11/07 职场文书
银行优秀员工推荐信
2015/03/24 职场文书
HTML+VUE分页实现炫酷物联网大屏功能
2021/05/27 Vue.js
python获取带有返回值的多线程
2022/05/02 Python