<!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. day5

    作业 作业需求: 模拟实现一个ATM + 购物商城程序 额度 15000或自定义 实现购物商城,买东西加入 购物车,调用信用卡接口结账 可以提现,手续费5% 每月22号出账单,每月10号为还款日,过期 ...

  2. JTextField 限制指定字符不能输入

    txtStartDate.addKeyListener(new KeyAdapter() { public void keyTyped(KeyEvent e) { int keyChar = e.ge ...

  3. STM32F412应用开发笔记之三：SPI总线通讯与AD采集

    本次我们在NUCLEO-F412ZG试验模拟量输入采集.我们的模拟量输入采用ADI公司的AD7705,是一片16位两路差分输入的AD采集芯片.具有SPI接口,我们将采用SPI接口与AD7705通讯.两 ...

  4. mvc架构

    mvc是三个单词的缩写,他们是Model(模型),view(视图),controller(控制) 1)最上面的一层,是直接面向最终用户的"视图层"(View).它是提供给用户的操作 ...

  5. Lintcode 102.带环链表

    ------------------------ 只要设置两个指针,称为快慢指针,当链表没有环的时候快指针会走到null,当链表有环的时候快指针早晚会追上慢指针的. AC代码: /** * Defin ...

  6. 3.2 配置构建Angular应用——简单的笔记存储应用

    本节我们会通过构建一个简单的笔记存储应用(可以载入并修改一组简单的笔记)来学习如何应用Angular的特性.这个应用用到的特性有: 在JSON文件中存储笔记 展示.创建.修改和删除笔记 在笔记中使用M ...

  7. [UWP]创建自定义VisualState Trigger

    这篇博客将介绍在UWP程序中如何创建和使用自定义VisualState Trigger. 上一篇博客中介绍了如何使用AdaptiveTrigger.目前UWP内置的StateTrigger只有Adap ...

  8. LWIP总结

    介绍 Lwip,light weight IP:是由Adam Dunkels 开发的一个小型开源的TCP/IP协议栈:目前已经为全球共同开发的开源协议:支持TCPIP协议族的核心协议:包括:ARP/I ...

  9. 1.Android 视图及View绘制分析笔记之setContentView

    自从1983年第一台图形用户界面的个人电脑问世以来,几乎所有的PC操作系统都支持可视化操作,Android也不例外.对于所有Android Developer来说,我们接触最多的控件就是View.通常 ...

  10. Myeclipse反编译插件的安装

    1.首先需要下载 jad.exe 和 jadClipse.jar 2.找到myeclipse的安装路径会有两个文件夹 3.需要新建一下文件夹 看准路径和jad.exe的位置 4.配置jadClipse ...