js实现未知宽高的元素在指定元素中垂直水平居中:
本章节介绍一下如何实现未知宽高的元素在指定元素下实现垂直水平居中效果，下面就以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元素宽高的一半，这样就实现了垂直水平居中效果。

js实现未知宽高的元素在指定元素中垂直水平居中的更多相关文章

  1. div+css实现未知宽高元素垂直水平居中

    div+css实现未知宽高元素垂直水平居中.很多同学在面试的时候都会遇到这样的问题:怎么用div+css的方法实现一个未知宽高的弹出框(或者图片)垂直水平居中??如果用JS的话就好办了,但是JS的使用 ...

  2. CSS未知宽高元素水平垂直居中

    方法一 :table.cell-table 思路:显示设置父元素为:table,子元素为:cell-table,这样就可以使用vertical-align: center,实现水平居中优点:父元素(p ...

  3. 未知宽高div水平垂直居中3种方法

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head&g ...

  4. table-cell实现未知宽高图片，文本水平垂直居中在div

    <BODY> <h1>未知宽高的图片水平垂直居中在div</h1> <!--box-outer--> <div class="box-o ...

  5. 已知宽高和未知宽高的div块的水平垂直居中

    //已知宽高的情况 .div1_container{     border:1px solid #00ee00;     height:300px;     position:relative; } ...

  6. CSS子元素居中(父元素宽高已知，子元素未知)

    <style> .container{width:400px; height:400px; position:relative;} .center{position:absolute; l ...

  7. js获取各种宽高方法

    屏幕的有效宽高: window.screen.availHeightwindow.screen.availWidth 网页可见区域宽:document.body.clientWidth 网页可见区域高 ...

  8. JS获取网页宽高方法集合

    JS获取网页宽高等方法的集合:document.body.clientWidth - 网页可见区域宽document.body.clientHeight - 网页可见区域高 document.body ...

  9. JS/jQ常用宽高及应用

    关于js的宽高,随便一搜就是一大堆.这个一大堆对我来说可不是什么好事,看的头都大了.所以今天就总结了一些比较会常用的,并说明一下应用场景. 先来扯一下documentElement和body的微妙关系 ...

随机推荐

  1. Android Studio 使用教程

    http://www.tuicool.com/articles/amMvM3B 用 Android Studio 开发安卓 APP-使用篇 http://ask.android-studio.org/ ...

  2. CSS和JS实现单行、多行文本溢出显示省略号（该js方法有问题不对）

    如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...

  3. MSSQL中建立分区表（转载备忘）

    转载自CSDN地址:http://bbs.csdn.net/topics/330087045 SQL Server 2005 分区表实践——建立分区表(partition table) 问题:有一个订 ...

  4. request.getParameter与request.getAttribute()

    这里就request为例,不去考虑session. request对象是javax.servlet.http.HttpServletRequest接口的一个实例,request表示调用JSP页面的请求 ...

  5. 1.Nexus安装与配置

    1.Nexus下载下载地址:http://www.sonatype.org/nexus/go/下载后的文件:nexus-2.11.4-01-bundle.zip安装:直接解压到某个目录即可解压后,会有 ...

  6. linux包之iproute之ip命令

    [root@localhost ~]# rpm -qf /sbin/ipiproute-2.6.32-31.el6.x86_64ip 是个命令, ip 命令的功能很多!基本上它整合了 ifconfig ...

  7. Nancy 简单学习

    1. 环境 vs2010 , nancy 2. 需要测试的功能 1. 输出 页面输出简单文本 2. 输出json 数据 3. 操作 1. 创建asp.net 空项目 2. 添加引用Nancy库 使用n ...

  8. Linux-LVS+keepalived-Testing

    LVS:Linux Virtual Server+++++++++++++Info+++++++++++VIP:172.18.20.222LVS-Master IP:172.18.20.206LVS- ...

  9. MySQL Show命令的使用

    show tables或show tables from database_name; 解释:显示当前数据库中所有表的名称 show databases; 解释:显示mysql中所有数据库的名称 sh ...

  10. css禁用鼠标点击事件

    css禁用鼠标点击事件 .disabled { pointer-events: none; } <div class="main-container disabled"> ...