<!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. T4310 祖玛游戏

    题目描述 祖玛是一款曾经风靡全球的游戏,其玩法是:在一条轨道上初始排列着若干 个彩色珠子,其中任意三个相邻的珠子不会完全同色.此后,你可以发射珠子到 轨道上并加入原有序列中.一旦有三个或更多同色的珠子 ...

  2. Android - Zxing实现二维码的扫描与生成

    Zxing: Zxing是一个开放源码,用java实现的多种格式的1D/2D条码图像处理库,它包含了联系到其他语言的端口.可以实现使用手机内置摄像头完成条形码的扫描以及解码. github:     ...

  3. Bootstrap 入门到精通

    介绍 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷.Bootstr ...

  4. 洛谷 P2068 统计和

    题目描述 给定一个长度为n(n<=100000),初始值都为0的序列,x(x<=10000)次的修改某些位置上的数字,每次加上一个数,然后提出y (y<=10000)个问题,求每段区 ...

  5. block总结我的

    1) struct Block_descriptor { unsigned long int reserved; unsigned long int size; void (*copy)(void * ...

  6. MAC 安装汇编编译工具 NASM

    直接运行nasm报错: 开始安装: brew reinstall nasm

  7. struct结构体内存大小

    一. 基本原则 1. struct中成员变量的声明顺序,与成员变量对应的内存顺序是一致的: 2. struct本身的起始存储地址必须是成员变量中最长的数据类型的整倍数,注意是最长的数据类型,而不是最长 ...

  8. WebStorm换主题（护眼）

    一.下载喜欢颜色的主题 http://www.phpstorm-themes.com/ 我用的豆沙绿护眼 <scheme name="Solarized Light My" ...

  9. 浏览器window产生的缓存九种解决办法

    浏览器缓存(Browser Caching)是浏览器端保存数据用于快速读取或避免重复资源请求的优化机制,有效的缓存使用可以避免重复的网络请求和浏览器快速地读取本地数据,整体上加速网页展示给用户.浏览器 ...

  10. eclips配置

    新建空workspace import... configMathod:main:project:eFT-Debug@eFTSlnC/C++ Aplication /media/B/testspa2. ...