<!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. 修改NavigationView中的Item的Icon大小

    <dimen name="navigation_icon_size">48dp</dimen>

  2. shell 输出九九乘法表

    #/bin/bash i= j= )) do while(($j<=$i)) do echo -ne $j×$i=$[$j*$i]"\t" j=$[$j+] done ech ...

  3. 文件上传之 HttpPostedFile

    HttpPostedFile类,提供对客户端已上载的单独文件的访问. 公共属性如下: SaveAs()方法,用于保存上传文件的内容. 用法为: #region 文件上传 /// <summary ...

  4. 模拟提交API数据Pyqt版

    其实这个模拟提交数据之前已经写过篇: Python requests模拟登录 因为现在在做的项目中需要一个debug请求调试API,用PHP的CURL写了一个,又因Pyqt更能直观灵活的显示请求的参数 ...

  5. Oracle连接与会话

    连接(connection):连接是从客户端到oracle数据库实例的一条物理路径. 会话(session):会话是数据库实例中存在的一个逻辑实体. case1:一个连接可以有多个会话 SQL> ...

  6. 防止sql注入和sqlmap介绍

    sql注入问题从WEB诞生到现在也一直没停过,各种大小公司都出现过sql注入问题,导致被拖库,然后存在社工库撞库等一系列影响. 防止sql注入个人理解最主要的就一点,那就是变量全部参数化,能根本的解决 ...

  7. Codeforces Round #382 Div. 2【数论】

    C. Tennis Championship(递推,斐波那契) 题意:n个人比赛,淘汰制,要求进行比赛双方的胜场数之差小于等于1.问冠军最多能打多少场比赛.题解:因为n太大,感觉是个构造.写写小数据, ...

  8. Etw EventSourceProvider_EventsProducer.cs OopConsoleTraceEventListenerMonitor_TraceControllerEventsConsumer.cs

    // EventSourceProvider_EventsProducer.cs /* /r:"D:\Microshaoft.Nuget.Packages\Microsoft.Diagnos ...

  9. #英文#品读中国城市个性——最好的和最坏的&当东方遇到西方

    冒险家的乐园 a playground of risk 实现发财梦 realize one's dreams of wealth 道德沦丧,堕落 moral deprivation 租界 foreig ...

  10. 了解 xcodebuild 命令 ,自动打包ipa

    引用博客:http://blog.nswebfrog.com/2015/10/31/xcodebuild/ 在 iOS 开发中,如果需要把工程打包成 ipa 文件,通常的做法就是在 Xcode 里点击 ...