<!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. LocalDB连接失败

    最近项目尝试放弃sqlexpress2005使用LocalDb2014,遇到问题: LocalDB安装成功,能正常添加实例,但同一个winform程序 在不同的win7电脑上有的能连上,有的怎么也连接 ...

  2. myeclipse中如何修改项目的名称

     第一种:myeclipse通用版 1.打比方,比如复制一个现有的项目,重命名项目名称,这里举例名称重新命名为"劳黑炭" 2.要清楚的是,这里的项目名称重新命名了,但是Web项目本 ...

  3. C#重启IIS指定网站和指定应用程序池

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  4. Vs2012 创建项目失败 未找到与约束ContractName

    刚开始使用vs2012的时候,创建项目失败,后来找到原因 ,是KB2840642V2的原因,于是 卸载之.vs正常

  5. Action向视图传值的6种方式

    在使用ASP.NET MVC进行项目开发时,经常会碰到从Action向视图传值的问题,今天我就把我所知道的方式总结了一下,分成了以下六种: 1.使用ViewData进行传值 在Action中,有如下代 ...

  6. SharedPreferences 详解

    获取SharedPreferences的两种方式: 1 调用Context对象的getSharedPreferences()方法 2 调用Activity对象的getPreferences()方法 两 ...

  7. WebGL入门教程(五)-webgl纹理

    前面文章: WebGL入门教程(一)-初识webgl WebGL入门教程(二)-webgl绘制三角形 WebGL入门教程(三)-webgl动画 WebGL入门教程(四)-webgl颜色 这里就需要用到 ...

  8. JS - 柯里化

    一:what's this? 柯里化: 是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数而且返回结果的新函数的技术.其实,柯里化就是用闭包原理实现函数 ...

  9. python 处理视频输入输出

    视频的处理和图片的处理类似,只不过视频处理需要连续处理一系列图片. 一般有两种视频源,一种是直接从硬盘加载视频,另一种是获取摄像头视频. 0x00. 本地读取视频 核心函数: cv.CaptureFr ...

  10. 模拟CSS3 多组位移运动属性的框架封装

    obj是将要运动的对象,json是运动完成时的位移结果. 封装要点: 1.定时器开关flag的定义要放在for in结构的外面,否则,每遍历一次,都会定义一个 新的flag 2.if(current ...