纯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 表单验证常见正则
Sep 28 Javascript
jQuery 开天辟地入门篇一
Dec 09 Javascript
javascript与CSS复习(三)
Jun 29 Javascript
Javascript中的isNaN函数使用说明
Nov 10 Javascript
jQuery each函数源码分析
May 25 Javascript
jQuery实现指定区域外单击关闭指定层的方法【经典】
Jun 22 Javascript
jquery easyui DataGrid简单示例
Jan 23 Javascript
Iview Table组件中各种组件扩展的使用
Oct 20 Javascript
javascript异步处理与Jquery deferred对象用法总结
Jun 04 jQuery
如何对react hooks进行单元测试的方法
Aug 14 Javascript
JavaScript async/await原理及实例解析
Dec 02 Javascript
使用typescript快速开发一个cli的实现示例
Dec 09 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
php长字符串定义方法
2012/07/12 PHP
PHP数据流应用的一个简单实例
2012/09/14 PHP
php实例分享之html转为rtf格式
2014/06/02 PHP
PHP+Mysql实现多关键字与多字段生成SQL语句的函数
2014/11/05 PHP
php获取ip及网址的简单方法(必看)
2017/04/01 PHP
PHP随机数函数rand()与mt_rand()的讲解
2019/03/25 PHP
PHP实现无限极分类的两种方式示例【递归和引用方式】
2019/03/25 PHP
php实现的数组转xml案例分析
2019/09/28 PHP
jQuery 第二课 操作包装集元素代码
2010/03/14 Javascript
JQuery 拾色器插件发布-jquery.icolor.js
2010/10/20 Javascript
JQury slideToggle闪烁问题及解决办法
2011/07/05 Javascript
jquery实现可拖动DIV自定义保存到数据的实例
2013/11/20 Javascript
javascript实现捕捉键盘上按下的键
2015/05/05 Javascript
JavaScript中标识符提升问题
2015/06/11 Javascript
基于jQuery通过jQuery.form.js插件使用ajax提交form表单
2015/08/17 Javascript
JS实现自动变化的导航菜单效果代码
2015/09/09 Javascript
Node.js 的模块知识汇总
2017/08/16 Javascript
jQuery实现侧边栏隐藏与显示的方法详解
2018/12/22 jQuery
vue实现购物车抛物线小球动画效果的方法详解
2019/02/13 Javascript
原生JS实现列表内容自动向上滚动效果
2019/05/22 Javascript
python创建进程fork用法
2015/06/04 Python
Python实现HTTP协议下的文件下载方法总结
2016/04/20 Python
python操作MySQL 模拟简单银行转账操作
2017/09/27 Python
详谈Python中列表list,元祖tuple和numpy中的array区别
2018/04/18 Python
Python机器学习算法库scikit-learn学习之决策树实现方法详解
2019/07/04 Python
Django实现跨域请求过程详解
2019/07/25 Python
python异常处理try except过程解析
2020/02/03 Python
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
2020/08/24 HTML / CSS
HTML5新增的表单元素和属性实例解析
2014/07/07 HTML / CSS
美特斯邦威官方商城:邦购网
2016/10/13 全球购物
英国定做窗帘和纺织品面料一站式商店:Dekoria
2018/08/29 全球购物
怀旧收藏品和经典纪念品:Betty’s Attic
2018/08/29 全球购物
英国HYPE双肩包官网:英国本土时尚潮牌
2018/09/26 全球购物
惹女朋友生气检讨书
2015/05/06 职场文书
你为什么是穷人?可能是这5个缺点造成
2019/07/11 职场文书
python运行脚本文件的三种方法实例
2022/06/25 Python