javascript实现在指定元素中垂直水平居中


Posted in Javascript onSeptember 13, 2015

本章节介绍一下如何实现未知宽高的元素在指定元素下实现垂直水平居中效果,下面就以span元素为例子,介绍一下如何实现span元素在div中实现水平垂直居中效果,代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<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元素宽高的一半,这样就实现了垂直水平居中效果。

例子二:

思路:实现起来最麻烦的其实是水平居中和垂直居中,其中垂直居中是最麻烦的。考虑到浏览器兼容性,网上看了一些资料,发现在页面中垂直居中确实没有什么太好的办法。于是就采用了position:fixed属性控制时钟的绝对位置,通过clientWidth和clientHeight来获取时钟的宽和高,利用javascript控制marginLeft和marginTop来居中时钟。

<!doctype html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>Centered Clock</title> 
  <style type="text/css"> 
 
    body{ 
      background: #fff; 
    } 
 
    body, div, p{ 
      margin: 0; 
      padding: 0; 
    } 
     
    .center{ 
      position: fixed; 
      left: 50%; 
      top: 50%; 
    } 
 
    .box{ 
      border: 1px solid #000; 
      padding: 20px 30px; 
      font-size: 1.5em; 
      font-weight: 500; 
      margin: auto auto; 
    } 
 
  </style> 
</head> 
<body> 
  <div class="center"> 
    <p class="box"></p> 
  </div> 
</body> 
<script type="text/javascript"> 
  window.onload = function () { 
     
    getTimes(); 
    var box = document.getElementsByClassName("box")[0]; 
    box.style.marginLeft = -box.clientWidth / 2 + "px"; 
    box.style.marginTop = -box.clientHeight / 2 + "px"; 
    setInterval(getTimes, 1000); 
  } 
 
  function getTimes() { 
 
    var box = document.getElementsByClassName("box")[0]; 
 
    var dateTime = new Date(); 
    var year = dateTime.getFullYear(); 
    var date = dateTime.getDate(); 
    var month = dateTime.getMonth() + 1; 
    var hours = dateTime.getHours(); 
    var minutes = dateTime.getMinutes(); 
    var secondes = dateTime.getSeconds(); 
 
    box.innerHTML = year + "-" + format(month) + "-" + format(date) + " " + format(hours) + ":"+ format(minutes) +":" + format(secondes); 
  } 
 
  function format(a) { 
    return a.toString().replace(/^(\d)$/, "0$1"); 
  } 
 
</script> 
</html>

例子三:

思路:采用相对定位,设定left和top值为(pw-w)/2和(ph-h)/w,其中pw和ph为外部标签的宽与高,w和h为内部标签的宽与高。

核心代码:

javascript实现在指定元素中垂直水平居中
javascript实现在指定元素中垂直水平居中

以上就是给大家总结的三种javascript实现居中的例子,小伙伴们可以参考下,希望对大家能够有所帮助。

Javascript 相关文章推荐
关闭ie窗口清除Session的解决方法
Jan 10 Javascript
jquery Ajax 实现加载数据前动画效果的示例代码
Feb 07 Javascript
JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
Feb 25 Javascript
如何高效率去掉js数组中的重复项
Apr 12 Javascript
网页挂马方式整理及详细介绍
Nov 03 Javascript
JavaScript基本类型值-Undefined、Null、Boolean
Feb 23 Javascript
80%应聘者都不及格的JS面试题
Mar 21 Javascript
AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
Oct 24 Javascript
vue的状态管理模式vuex
Nov 30 Javascript
JavaScript Dom实现轮播图原理和实例
Feb 19 Javascript
JS创建或填充任意长度数组的小技巧汇总
Oct 24 Javascript
利用js实现简单开关灯代码
Nov 23 Javascript
window.onload使用指南
Sep 13 #Javascript
JS+CSS简单树形菜单实现方法
Sep 12 #Javascript
纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示
Sep 12 #Javascript
JS实现超精简响应鼠标显示二级菜单代码
Sep 12 #Javascript
JS+CSS实现的简单折叠展开多级菜单效果
Sep 12 #Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
Sep 12 #Javascript
jquery实现最简单的滑动菜单效果代码
Sep 12 #Javascript
You might like
php实现图片上传并进行替换操作
2016/03/15 PHP
Yii实现Command任务处理的方法详解
2016/07/14 PHP
PHP文件操作详解
2016/12/30 PHP
javascript 程序库的比较(一)之DOM功能
2010/04/07 Javascript
Jquery拖拽并简单保存的实现代码
2010/11/28 Javascript
js函数获取html中className所在的内容并去除标签
2013/09/08 Javascript
js实现的点击数量加一可操作数据库
2014/05/09 Javascript
JS获取客户端IP地址、MAC和主机名的7个方法汇总
2014/07/21 Javascript
javascript判断变量是否有值的方法
2015/04/20 Javascript
浅谈toLowerCase和toLocaleLowerCase的区别
2016/08/15 Javascript
Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发
2016/08/31 Javascript
阿里云ecs服务器中安装部署node.js的步骤
2016/10/08 Javascript
JavaScript运动框架 解决速度正负取整问题(一)
2017/05/17 Javascript
Vue.js中数据绑定的语法教程
2017/06/02 Javascript
关于Vue背景图打包之后访问路径错误问题的解决
2017/11/03 Javascript
vue实现密码显示与隐藏按钮的自定义组件功能
2019/04/23 Javascript
javaScript中indexOf用法技巧
2019/11/26 Javascript
Vue v-for中的 input 或 select的值发生改变时触发事件操作
2020/08/31 Javascript
详解ES6实现类的私有变量的几种写法
2021/02/10 Javascript
Python中请使用isinstance()判断变量类型
2014/08/25 Python
Golang与python线程详解及简单实例
2017/04/27 Python
Python爬虫常用小技巧之设置代理IP
2018/09/13 Python
Python大数据之从网页上爬取数据的方法详解
2019/11/16 Python
Python程序控制语句用法实例分析
2020/01/14 Python
Django-simple-captcha验证码包使用方法详解
2020/11/28 Python
门卫岗位安全职责
2013/12/13 职场文书
服装设计行业个人的自我评价
2013/12/20 职场文书
国际贸易个人求职信范文
2014/01/04 职场文书
九年级语文教学反思
2014/02/04 职场文书
大宝sod蜜广告词
2014/03/21 职场文书
空乘英文求职信
2014/04/13 职场文书
银行主办会计岗位职责
2014/08/13 职场文书
企业员工爱岗敬业演讲稿
2014/08/26 职场文书
2014年中班下学期工作总结
2014/12/11 职场文书
朋友聚会开场白
2015/06/01 职场文书
Python爬虫框架之Scrapy中Spider的用法
2021/06/28 Python