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. centos 编译swoole

    /usr/include/php/ext/pcre/php_pcre.h:45: error: expected '=', ',', ';', 'asm' or '__attribute__' bef ...

  2. 用max-width来防止图片溢出---不兼容ie6-----将max-width设置成父元素的宽度，当图片过大时会换行，以及限制图片的宽度。但是如果使用table，仍然可能超出限制。

    img{ max-width:100%;  height:auto; } 如题.

  3. js定义变量需赋予初始值

    这是console.log打印出来的日志,就是多了一个undefined 日志: hitTableObjectID:undefinedbfa4be7b-32fc-459a-9092-ecde316b3 ...

  4. 请让页面中的一个元素（10px*10px）围绕坐标(200, 300) 做圆周运动

    <!DOCTYPE html> <html> <head> <title>Making things move</title> <me ...

  5. LOMO效果

    //LOMO效果 public static Bitmap changeToLomo(Bitmap bitmap) { int width = bitmap.getWidth(); int heigh ...

  6. pyzmq missing when running ipython notebook

    Q: I can run iPython, but when I try to initiate a notebook I get the following error: ~ ipython not ...

  7. python爬虫之BeautifulSoup

    爬虫有时候写正则表达式会有假死现象 就是正则表达式一直在进行死循环查找 例如:https://social.msdn.microsoft.com/forums/azure/en-us/3f4390ac ...

  8. Mdrill：来自阿里的多维快速查询工具

    mdrill是阿里妈妈-adhoc-海量数据多维自助即席查询平台下的一个子项目.旨在帮助用户在几秒到几十秒的时间内,分析百亿级别的任意维度组合的数据.mdrill是一个分布式的在线分析查询系统,基于h ...

  9. mysql frm的恢复，data里只有frm文件的恢复

    mysql frm的恢复,data里只有frm文件的恢复 mysql frm的恢复,data里只有frm文件的恢复,换了系统,装了windows2003,重装最新5.4版的mysql,把原来的一个数据 ...

  10. TTL电平和CMOS电平总结

    TTL电平和CMOS电平总结 1,TTL电平:          输出高电平>2.4V,输出低电平<0.4V.在室温下,一般输出高电平是3.5V,输出低电平是0.2V.最小输入高电平和低电 ...