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. Frameworks ， cat，kafka

    https://github.com/ServiceStack/ServiceStack https://github.com/ctripcorp/ https://github.com/ctripc ...

  2. Postfix性能测试(PHP版)

    Postfix的性能压测(PHP版) 发送测试:分别使用PHP Mail()函数和PHPMailler smtp协议发送邮件, 推送速率是指 发送个数/PHP程序运行时间, 发送速率是指 发送个数/( ...

  3. visual studio F12 失效,可能是装了插件,比如ReSharper 但是,ReSharper没有激活导致.

    visual studio   F12 失效,可能是装了插件,比如ReSharper 但是,ReSharper没有激活导致.

  4. 【转】PHP 之 CURL 模拟登陆并获取数据

    1.CURL模拟登陆的流程和步骤2.tempnam 创建一个临时文件3.使用CURL模拟登陆到PHP100论坛 <?php$cookie_file = tempnam('./temp','coo ...

  5. python input() 与 raw_input()

    使用input和raw_input都可以读取控制台的输入,但是input和raw_input在处理数字时是有区别的 当输入为纯数字时: input返回的是数值类型,如int,floatraw_inpo ...

  6. ubuntu- eclipse、CDT安装

    eclipse的安装: 应用程序->附件->终端                                       然后输入(中间可能需要你输入密码):              ...

  7. 转载：使用sklearn进行数据挖掘

    目录 1 使用sklearn进行数据挖掘 1.1 数据挖掘的步骤 1.2 数据初貌 1.3 关键技术2 并行处理 2.1 整体并行处理 2.2 部分并行处理3 流水线处理4 自动化调参5 持久化6 回 ...

  8. 邮件发送工具类 SendMail.java

    package com.util; import org.apache.commons.mail.EmailException; import org.apache.commons.mail.Simp ...

  9. iText导出pdf、word、图片

    一.前言 在企业的信息系统中,报表处理一直占比较重要的作用,本文将介绍一种生成PDF报表的Java组件--iText.通过在服务器端使用Jsp或JavaBean生成PDF报表,客户端采用超级连接显示或 ...

  10. session_write_close()

    功能: 结束当前的session 操作 保存session 数据  说的很明白了, 当脚本请求没有调用session_write_close(); 时虽然 session  的数据是存储住了.但是 s ...