<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>块元素DIV-垂直/水平居中（动态）</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//当调整浏览器窗口的大小时，发生 resize 事件
$(window).resize(function(){$(".mydiv").css({
position:"absolute",
left:($(window).width()-$(".mydiv").outerWidth())/2,
top:($(window).height()-$(".mydiv").outerHeight())/2});
});
$(function(){
$(window).resize();
});
});
$(function(){//当页面刷新时，发生resize事件（可删除这三行程序，自己测试一下）
$(window).resize();
});
</script>
</head>
<body>
<div class="mydiv">呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵</div>
</body>
</html>
提示：运行本段代码需要下载jQuery插件
代码原理：通过jQuery设置DIV的CSS，获取DIV的左、上的边距偏移量，边距偏移量的算法就是用页面窗口的宽度减去该DIV得宽度，得到的值再除以2即左偏移量，右偏移量算法相同

DIV垂直/水平居中2（DIV宽度和高度是动态的）的更多相关文章

  1. css中设置div垂直水平居中的方法

    设置要水平垂直居中的div的position为absolute,left:50%;margin-left为负的这个元素宽度的一半,同理,top:50%;margin-top为负的这个元素的高度的一半. ...

  2. div垂直水平居中的四种方法总结

    5.利用弹性布局 与 margin: <style> .container{ height: 600px; width: 600px; border:1px solid black; di ...

  3. 怎么让一个不定宽高的div垂直水平居中？

    方法一:使用CSS3 transform 父盒子设置:position:relative; div设置:position:absolute;transform:translate(-50%,-50%) ...

  4. DIV垂直水平居中

    方法一:使用定位的方法 .parent { width: 300px; height: 200px; border: 1px solid red; position:relative; } .chil ...

  5. 【CSS基础】实现 div 里的内容垂直水平居中

    方案一: 所有内容垂直水平居中 兼容性:IE8+. 条件:内容宽度和高度可以未知,可以是多行文字.图片.div. 描述:使用table-cell + vertical-align , html代码见文 ...

  6. div中单行文字垂直水平居中

    1.div中单行文字垂直水平居中.条件:外层div高度已经给定.代码如下: 复制代码代码如下: <style type="text/css">.div3{border: ...

  7. CCS进阶——div的宽度和高度是由什么决定的？

    核心知识 文档流/普通流(Normal Flow) 内联元素的宽高(高度是由行高决定的,宽度=内容+border+marging+padding) 块级元素的宽高(高度是内部文档流元素的高度总和,宽度 ...

  8. css实现div不定宽高垂直水平居中解决方案

    在项目中我们经常能碰见然图片垂直水平居中,不定宽高的div垂直水平居中,等等~~ 现在我将介绍我所知道的几种用css来解决的几种方案. 1.父元素text-align:center;display:t ...

  9. DIV 垂直 垂直水平 居中

    DIV 垂直 居中 让div居中对齐 使用margin-left:auto;margin-right:auto; 可以让你的div居中对齐.  .style{margin-left:auto;marg ...

随机推荐

  1. jQuery1.6.1源码分析系列（作者：nuysoft/高云）

    作者:nuysoft/高云 QQ:47214707 Email:nuysoft@gmail.com jQuery源码分析(版本1.6.1) 00 前言开光 01 总体架构 02 正则表达式-RegEx ...

  2. datagrid数据网格获取所有选中行的索引，插入某个列值为其他列的运算值

    获取所有选中行的索引,存入数组ary中: var data=$("#dg").datagrid("getSelections"); var ary=[]; fo ...

  3. show processlist使用介绍

    这个命令中最关键的就是state列,mysql列出的状态主要有以下几种: Checking table 正在检查数据表(这是自动的).Closing tables 正在将表中修改的数据刷新到磁盘中,同 ...

  4. 移动端:active伪类无效的解决方法

    :active伪类常用于设定点击状态下或其他被激活状态下一个链接的样式.最常用于锚点<a href="#">这种情况,一般主流浏览器下也支持其他元素,如button等. ...

  5. call和apply方法的异同

    基本作用:改变对象的执行上下文. this指向执行上下文.(执行环境) this指向的永远是调用该方法的对象 function func(){ this.a=1; console.log(this.a ...

  6. 关于js作用域问题详解

    执行上下文 函数表达式和函数声明 1. console.log(a); // ReferenceError: a is not defined // ReferenceError(引用错误)对象表明一 ...

  7. 洛谷五月月赛【LGR-047】划水记

    虽然月赛有些爆炸,但我永远资瓷洛谷! 因为去接水,所以迟到了十几分钟,然后洛谷首页就打不开了-- 通过洛谷题库间接打开了比赛,看了看\(TA\),WTF?博弈论?再仔细读了读题,嗯,判断奇偶性,不过要 ...

  8. Bootstrap CSS概览

    HTML5文档类型(<!DOCTYPE html>) Bootstrap前端框架使用了HTML5和CSS属性,为了让这些能正常工作,您需要使用HTML5文档类型(<!DOCTYPE ...

  9. iBeacon技术

    声明:部分资料来源自互联网 前言 iBeacon 最早推出是在今年的苹果 WWDC 大会上.作为 iOS 7 的一部分,它吸引人的一点是,iBeacon 是一种开发标准——绝大多数智能手机支持蓝牙 4 ...

  10. 洛谷P1000 超级玛丽游戏

    这道题很简单,就是原样输出,只不过写起来有点恶心!!! code: #include<stdio.h> int main() { printf( " ********\n&quo ...