<!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. eclipse的hadoop插件对集群操作提示org.apache.hadoop.security.AccessControlException:Permission denied

    eclipse的hadoop插件对集群操作提示org.apache.hadoop.security.AccessControlException:Permission denied: user = z ...

  2. COGS 36. 求和问题

    时间限制:1.2 s   内存限制:128 MB [问题描述]     在一个长度为n的整数数列中取出连续的若干个数,并求它们的和. [输入格式]     输入由若干行组成,第一行有一个整数n    ...

  3. HDOJ 4509 湫湫系列故事——减肥记II（2013腾讯编程马拉松） 并查集合并区间

    发现这种合并区间的题目还可以这么玩 给你n段时间 然后问没被占用的时间是多少 题目所给的区间是右开的导致我wa 好多人5e5*1440的暴力跑出来的时间居然只是我的两倍 不懂.... 所以并查集并没有 ...

  4. python已安装好第三方库，pycharm import时仍标红的解决办法

    pip install pymysql之后导入import pymysql时候标红 发现 pymysql下方还是标红,不能正常导入 可以试用一下以下的办法 解决办法: 首先打开 Settings找到P ...

  5. PAT (Basic Level) Practise （中文）-1025. 反转链表 (25)

    PAT (Basic Level) Practise (中文)-1025. 反转链表 (25)   http://www.patest.cn/contests/pat-b-practise/1025 ...

  6. RedHat7搭建KVM虚拟机

    RedHat7搭建KVM虚拟机 1. 宿主机安装RedHat7.3系统 1.1选择语言 中文.简体中文(中国) 1.2安装位置 1.2.1自定义分区,选择LVM,将分区空间全部分配给根 1.2.2禁用 ...

  7. 浅谈 Swift 2 中的 Objective-C 指针

    浅谈 Swift 2 中的 Objective-C 指针 2015-09-07  499 文章目录 1. 在 Swift 中读 C 指针 2. 在 Swift 中创建 C 指针 3. 总结 作者:Ja ...

  8. vue-cli3.0 生产包去除console.log

    目前负责的公众号又迭代了一个版本,之前打生产包,配置总是和测试包搞混,所以使用了vue-cli3.0的环境变量来控制配置. 但是又发现了一个新问题,写代码的过程中写了很多console.log 来调试 ...

  9. POJ 3080 Blue Jeans、POJ 3461 Oulipo——KMP应用

    题目:POJ3080 http://poj.org/problem?id=3080 题意:对于输入的文本串,输出最长的公共子串,如果长度相同,输出字典序最小的. 这题数据量很小,用暴力也是16ms,用 ...

  10. Codeforces Round #510 #C Array Product

    http://codeforces.com/contest/1042/problem/C 给你一个有n个元素序列,有两个操作:1,选取a[i]和a[j],删除a[i],将$a[i]*a[j]$赋值给a ...