纯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的将DropDownlist的选中值赋给label的实现代码
May 06 Javascript
js预载入和JavaScript Image()对象使用介绍
Aug 28 Javascript
固定网页背景图同时保持图片比例的思路代码
Aug 15 Javascript
深入解析JavaScript中的变量作用域
Dec 06 Javascript
仿百度联盟对联广告实现代码
Aug 30 Javascript
javascript模拟实现ajax加载框实例
Oct 15 Javascript
使用Raygun来自动追踪AngularJS中的异常
Jun 23 Javascript
JS实现带圆弧背景渐变效果的导航菜单代码
Oct 13 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
Jul 01 Javascript
从零开始做一个pagination分页组件
Mar 15 Javascript
微信小程序 获取session_key和openid的实例
Aug 17 Javascript
微信小程序与公众号实现数据互通的方法
Jul 25 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设计模式之单例模式使用示例
2014/01/20 PHP
php实现以只读方式打开文件的方法
2015/03/16 PHP
PDO::inTransaction讲解
2019/01/28 PHP
用js查找法实现当前栏目的高亮显示的代码
2007/11/24 Javascript
mapper--图片热点区域高亮组件官方站点
2007/12/22 Javascript
js window.print实现打印特定控件或内容
2013/09/16 Javascript
使用简洁的jQuery方法实现隔行换色功能
2014/01/02 Javascript
jquery果冻抖动效果实现方法
2015/01/15 Javascript
jQuery实现限制textarea文本框输入字符数量的方法
2015/05/28 Javascript
第七章之菜单按钮图标组件
2016/04/25 Javascript
详解jQuery的Cookie插件
2016/11/23 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
2017/01/22 Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
2017/06/03 Javascript
Angular2关于@angular/cli默认端口号配置的问题
2017/07/15 Javascript
AngularJS实时获取并显示密码的方法
2018/02/06 Javascript
详解从0开始搭建微信小程序(前后端)的全过程
2019/04/15 Javascript
ES6知识点整理之函数数组参数的默认值及其解构应用示例
2019/04/17 Javascript
vue的keep-alive中使用EventBus的方法
2019/04/23 Javascript
详解微信小程序调用支付接口支付
2019/04/28 Javascript
js实现图片粘贴到网页
2019/12/06 Javascript
浅谈JavaScript 声明提升
2020/09/14 Javascript
8个非常实用的Vue自定义指令
2020/12/15 Vue.js
[01:25]DOTA2自定义游戏灵园鬼域等你踏足
2015/10/30 DOTA
videocapture库制作python视频高速传输程序
2013/12/23 Python
寻找网站后台地址的python脚本
2014/09/01 Python
在Python中处理XML的教程
2015/04/29 Python
Django 实现将图片转为Base64,然后使用json传输
2020/03/27 Python
Python爬虫教程之利用正则表达式匹配网页内容
2020/12/08 Python
CSS3模拟IOS滑动开关效果
2016/09/28 HTML / CSS
原生canvas制作画图小工具的踩坑和爬坑
2020/06/09 HTML / CSS
PatPat阿根廷:妈妈们的购物平台
2019/05/30 全球购物
为什么group by 和order by会使查询变慢
2014/05/16 面试题
开业庆典邀请函
2014/01/08 职场文书
大学生简历求职信
2014/06/24 职场文书
关于运动会的广播稿(10篇)
2014/09/12 职场文书
街道社区活动报告
2015/02/05 职场文书