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 相关文章推荐
Prototype Hash对象 学习
Jul 19 Javascript
ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter
Feb 03 Javascript
idTabs基于JQuery的根据URL参数选择Tab插件
Apr 11 Javascript
js 表单提交后按钮变灰的实例代码
Aug 16 Javascript
window.open 以post方式传递参数示例代码
Feb 27 Javascript
jQuery实现向下滑出的二级菜单效果实例
Aug 22 Javascript
详解ECMAScript6入门--Class对象
Apr 27 Javascript
Vue实现virtual-dom的原理简析
Jul 10 Javascript
JavaScript正则表达式的贪婪匹配和非贪婪匹配
Sep 05 Javascript
原生JS获取元素的位置与尺寸实现方法
Oct 18 Javascript
vue利用better-scroll实现轮播图与页面滚动详解
Oct 20 Javascript
如何将百度地图包装成Vue的组件的方法步骤
Feb 12 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和Shell写Hadoop的MapReduce程序
2014/04/15 PHP
php中 ob_start等函数截取标准输出的方法
2015/06/22 PHP
php支持断点续传、分块下载的类
2016/05/02 PHP
PHP7新特性foreach 修改示例介绍
2016/08/26 PHP
php实现微信扫码自动登陆与注册功能
2016/09/22 PHP
thinkPHP5框架实现基于ajax的分页功能示例
2018/06/12 PHP
你可能不再需要JQUERY
2021/03/09 Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
2017/01/26 Javascript
原生js实现旋转木马轮播图效果
2017/02/27 Javascript
在使用JSON格式处理数据时应该注意的问题小结
2017/05/20 Javascript
详解vue表单——小白速看
2018/04/08 Javascript
React props和state属性的具体使用方法
2018/04/12 Javascript
vue 全局环境切换问题
2019/10/27 Javascript
关于vue表单提交防双/多击的例子
2019/10/31 Javascript
element表格翻页第2页从1开始编号(后端从0开始分页)
2019/12/10 Javascript
JS数组方法concat()用法实例分析
2020/01/18 Javascript
JavaScript中作用域链的概念及用途讲解
2020/08/06 Javascript
[00:32]2018DOTA2亚洲邀请赛EG出场
2018/04/03 DOTA
使用PM2+nginx部署python项目的方法示例
2018/11/07 Python
Python中的heapq模块源码详析
2019/01/08 Python
PyQt4编程之让状态栏显示信息的方法
2019/06/18 Python
华为2019校招笔试题之处理字符串(python版)
2019/06/25 Python
解决tensorflow打印tensor有省略号的问题
2020/02/04 Python
HTML5实现音频和视频嵌入的方法
2018/08/22 HTML / CSS
Booking.com美国:全球酒店预订网站
2017/04/18 全球购物
戴尔英国官网:Dell英国
2017/05/27 全球购物
这76道Java面试题及答案,祝你能成功通过面试
2016/04/16 面试题
秋季运动会通讯稿
2014/01/24 职场文书
管理失职检讨书
2014/02/12 职场文书
吸烟检讨书2000字
2014/02/13 职场文书
2015年元旦联欢晚会活动总结
2014/11/28 职场文书
初三语文教学反思
2016/03/03 职场文书
2019企业给员工的慰问信
2019/06/24 职场文书
LayUI+Shiro实现动态菜单并记住菜单收展的示例
2021/05/06 Javascript
Mysql忘记密码解决方法
2022/02/12 MySQL
MySQL 原理与优化之Limit 查询优化
2022/08/14 MySQL