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 相关文章推荐
JavaScript 继承详解(二)
Jul 13 Javascript
浅析Js中的单引号与双引号问题
Nov 06 Javascript
jq实现酷炫的鼠标经过图片翻滚效果
Mar 12 Javascript
javascript使用prototype完成单继承
Dec 24 Javascript
javascript实现类似百度分享功能的方法
Jul 27 Javascript
实现高性能JavaScript之执行与加载
Jan 30 Javascript
让你一句话理解闭包(简单易懂)
Jun 03 Javascript
谈谈JavaScript数组常用方法总结
Jan 24 Javascript
Vue-cli创建项目从单页面到多页面的方法
Sep 20 Javascript
bootstrap模态框嵌套、tabindex属性、去除阴影的示例代码
Oct 17 Javascript
three.js 将图片马赛克化的示例代码
Jul 31 Javascript
vue-cli4.5.x快速搭建项目
May 30 Vue.js
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(3) php 函数
2010/02/15 PHP
适用于php-5.2 的 php.ini 中文版[金步国翻译]
2011/04/17 PHP
浅谈php正则表达式中的非贪婪模式匹配的使用
2014/11/25 PHP
use jscript Create a SQL Server database
2007/06/16 Javascript
jquery.lazyload  实现图片延迟加载jquery插件
2010/02/06 Javascript
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
2013/06/26 Javascript
js截取字符串的两种方法及区别详解
2013/11/05 Javascript
运用JQuery的toggle实现网页加载完成自动弹窗
2014/03/18 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
2014/12/29 Javascript
javascript学习之json入门
2016/12/22 Javascript
示例vue 的keep-alive缓存功能的实现
2018/12/13 Javascript
JavaScript动态添加数据到表单并提交的几种方式
2019/06/26 Javascript
js实现类选择器和name属性选择器的示例步骤
2021/02/07 Javascript
[03:18]DOTA2亚洲邀请赛小组赛第一日 RECAP赛事回顾
2015/01/30 DOTA
python实现划词翻译
2020/04/23 Python
python获取图片颜色信息的方法
2015/03/18 Python
python生成式的send()方法(详解)
2017/05/08 Python
scrapy spider的几种爬取方式实例代码
2018/01/25 Python
python取代netcat过程分析
2018/02/10 Python
Python处理菜单消息操作示例【基于win32ui模块】
2018/05/09 Python
Python(TensorFlow框架)实现手写数字识别系统的方法
2018/05/29 Python
Python 正则表达式匹配字符串中的http链接方法
2018/12/25 Python
基于Python实现大文件分割和命名脚本过程解析
2019/09/29 Python
pytorch .detach() .detach_() 和 .data用于切断反向传播的实现
2019/12/27 Python
如何通过python计算圆周率PI
2020/11/11 Python
纯CSS3实现图片无间断轮播效果
2016/08/25 HTML / CSS
四方通行旅游网:台湾订房、出国旅游
2017/09/20 全球购物
expedia比利时:预订航班+酒店并省钱
2018/07/13 全球购物
线程同步的方法
2016/11/23 面试题
车间主管岗位职责
2013/11/14 职场文书
市场拓展计划书
2014/05/03 职场文书
逃课检讨书
2015/01/26 职场文书
使用canvas仿Echarts实现金字塔图的实例代码
2021/11/11 HTML / CSS
MySQL分区表管理命令汇总
2022/03/21 MySQL
详解SQL的窗口函数
2022/04/21 Oracle
python如何查找列表中元素的位置
2022/05/30 Python