<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>JS实现-DIV自动居中代码</title>

<meta name="keywords" content="" />

<meta name="description" content="" />

<style>

*{margin:0;padding:0}

#box{width:100px;height:100px;position:absolute;top:30px;left:20px; background:#ccc}

</style>

</head>

<body>

<div id="box"></div>

<script>

window.onload = function(){

    function box(){

    //获取DIV为'box'的盒子

    var oBox = document.getElementById('box');

    //获取元素自身的宽度

    var L1 = oBox.offsetWidth;

    //获取元素自身的高度

    var H1 = oBox.offsetHeight;

    //获取实际页面的left值。（页面宽度减去元素自身宽度/2）

    var Left = (document.documentElement.clientWidth-L1)/2;

    //获取实际页面的top值。（页面宽度减去元素自身高度/2）

    var top = (document.documentElement.clientHeight-H1)/2;

    oBox.style.left = Left+'px';

    oBox.style.top = top+'px';

    }

    box();

    //当浏览器页面发生改变时，DIV随着页面的改变居中。

    window.onresize = function(){

        box();

    }

}

</script>

</body>

</html>

js实现div居中的更多相关文章

  1. 弹出层js让DIV居中

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. js控制div滚动条，滚动滚动条使div中的元素可见并居中

    1.html代码如下 <div id="panel"> <div id="div1"></div> <div id=& ...

  3. Flex 布局 （两个div居中自适应 宽度变小变一列，宽度够就是两列）

    https://www.runoob.com/w3cnote/flex-grammar.html display: flex; justify-content: center; align-items ...

  4. bootstrap之div居中

    bootstrap之div居中 偏移列 偏移是一个用于更专业的布局的有用功能.它们可用来给列腾出更多的空间.例如,.col-xs=* 类不支持偏移,但是它们可以简单地通过使用一个空的单元格来实现该效果 ...

  5. 移动页面div居中效果代码

    在线查看效果:http://hovertree.com/texiao/mobile/4.htm 可用手机浏览器查看 以下为HTML文件: <!DOCTYPE html> <html& ...

  6. js 控制Div循环显示 非插件版

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 【转】div居中代码 DIV水平居中显示CSS代码

    原文地址:http://www.divcss5.com/rumen/r622.shtml 如何使用CSS让DIV居中显示,让div水平居中有哪些CSS样式呢? 需要的主要css代码有两个,一个为tex ...

  8. JS控制DIV隐藏显示

    转载自:http://blog.sina.com.cn/s/blog_6c3a67be0100ldbe.html JS控制DIV隐藏显示 一,需求描述: 现在有3个DIV块,3个超链接,需要点击一个链 ...

  9. 【转】CSS中怎么让DIV居中

    来源:http://www.cnblogs.com/DebugLZQ/archive/2011/08/09/2132381.html     CSS 如何使DIV层水平居中 今天用CSS碰到个很棘手的 ...

随机推荐

  1. node08-express

    目录:node01-创建服务器 node02-util node03-events node04-buffer node05-fs node06-path node07-http node08-exp ...

  2. 项目中 -- 设置tabBar样式 （旅游局）

    - (void)addChildViewController:(UIViewController *)ViewController image:(UIImage *)image selectImg:( ...

  3. wamp2.5 配置多端口虚拟主机

    1.保证httpd.conf下 Include conf/extra/httpd-vhosts.conf LoadModule php5_module "D:/E/php/wamp/bin/ ...

  4. H5(二)

    音视频处理   视频处理     基本内容       使用Flash技术处理HTML页面中的视频内容         包含音频.动画.网页游戏等  特点    浏览器原生不支持(IE浏览器要求安装A ...

  5. ExtJs基础知识总结：Dom、IFrame和TreePanel、TabPanel（三）

    概述 ExtJs是另外一种操作封装JavaScript的类库与Jquery同类.所以对Dom的操作也是支持的,比如修改Div内Html内容等操作.有几个问题需要思考下: 1.ExtJs也支持IFram ...

  6. 攻城狮在路上（陆）-- 提交运行MapReduce程序到hadoop集群运行

    此种方式不能直接在eclipse中调试代码. 首先需要在src下放置服务器上的hadoop配置文件:core-site.xml\yarn-site.xml\hdfs-site.xml\mapred-s ...

  7. C# 通过反射获取扩展方法

    注意,扩展方法本质上是静态方法,所以拿到MethodInfo时,应该这么调用 methodInfo.Invoke(null, new object[]{params}) static IEnumera ...

  8. Xocde一次版本升级遇到的问题 (Code Sign Error）

    因为Xcode对ios版本的支持问题,我对XCode进行了一次升级,导致原来还好的项目代码出现了编译时错误. Code Sign Error failed with exit code 1 问题就在于 ...

  9. Solr4.10.3安装配置

    系统环境 window版本为:windows 8.1 64位 软件环境 JDK版本:1.7 solr版本:4.10.3 tomcat版本:tomcat 7 安装过程 步骤一:将下载好的solr-4.1 ...

  10. OGNL的使用

    访问Action中的普通属性: <s:property value="loginname"/><br/> 访问Action中的对象属性: <s:pro ...