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 相关文章推荐
Html中JS脚本执行顺序简单举例说明
Jun 19 Javascript
上传的js验证(图片/文件的扩展名)
Apr 25 Javascript
javascript实现左右控制无缝滚动
Dec 31 Javascript
2种jQuery 实现刮刮卡效果
Feb 01 Javascript
jquery的ajax提交form表单的两种方法小结(推荐)
May 25 Javascript
jQuery实现右键菜单、遮罩等效果代码
Sep 27 Javascript
详解vue 模拟后台数据(加载本地json文件)调试
Aug 25 Javascript
深入理解Vue Computed计算属性原理
May 29 Javascript
vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法
Sep 19 Javascript
Vue使用zTree插件封装树组件操作示例
Apr 25 Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
Dec 25 Javascript
JavaScript cookie原理及使用实例
May 08 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中获取关键词及所属来源搜索引擎名称的代码
2011/02/15 PHP
MySQL 日期时间函数常用总结
2012/06/12 PHP
php下拉选项的批量操作的实现代码
2013/10/14 PHP
Laravel框架在本地虚拟机快速安装的方法详解
2018/06/11 PHP
php判断/计算闰年的方法小结【三种方法】
2019/07/06 PHP
很可爱的输入框
2008/08/03 Javascript
有关于JS辅助函数inherit()的问题
2013/04/07 Javascript
JavaScript prototype 使用介绍
2013/08/29 Javascript
JS中typeof与instanceof之间的区别总结
2013/11/14 Javascript
javascript引擎长时间独占线程造成卡顿的解决方案
2014/12/03 Javascript
node.js中的url.format方法使用说明
2014/12/10 Javascript
Javascript中判断对象是否为空
2015/06/10 Javascript
Javascript之Math对象详解
2016/06/07 Javascript
js实现加载更多功能实例
2016/10/27 Javascript
详解vue之页面缓存问题(基于2.0)
2017/01/10 Javascript
jQuery选择器之属性筛选选择器用法详解
2017/09/19 jQuery
解析Vue2 dist 目录下各个文件的区别
2017/11/22 Javascript
基于JS实现带动画效果的流程进度条
2018/06/01 Javascript
js动态设置select下拉菜单的默认选中项实例
2018/08/21 Javascript
一文搞懂ES6中的Map和Set
2019/05/20 Javascript
jquery中为什么能用$操作
2019/06/18 jQuery
使用webpack将ES6转化ES5的实现方法
2019/10/13 Javascript
Python实现的异步代理爬虫及代理池
2017/03/17 Python
Python中的is和==比较两个对象的两种方法
2017/09/06 Python
Python数据结构dict常用操作代码实例
2020/03/12 Python
详解使用python3.7配置开发钉钉群自定义机器人(2020年新版攻略)
2020/04/01 Python
python 匿名函数与三元运算学习笔记
2020/10/23 Python
python爬虫中url管理器去重操作实例
2020/11/30 Python
python使用dlib进行人脸检测和关键点的示例
2020/12/05 Python
解析HTML5中的新功能本地存储localStorage
2016/03/01 HTML / CSS
大都会艺术博物馆商店:The Met Store
2018/06/22 全球购物
写给女朋友的检讨书
2014/01/28 职场文书
大学生求职信例文
2014/06/29 职场文书
街道社区活动报告
2015/02/05 职场文书
工作计划范文之财务管理
2019/08/09 职场文书
Java elasticsearch安装以及部署教程
2021/06/28 Java/Android