<!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. CF1060C Maximum Subrectangle

    思路: 不难发现,对矩阵中的数字求和实际上是先分别对a,b两个数列中对应子段的元素求和再相乘.题目是要求在和不超过给定值的情况下使选出的矩阵面积最大.我们反其道而行之,考虑在子段长度一定的情况下,和最 ...

  2. Android实现按钮点击效果（第一次点击变色，第二次恢复）

    1.首先创建一个按钮 <Button android:id="@+id/click" android:layout_width="fill_parent" ...

  3. C++拾遗（三）——函数

    函数的定义 C++是一种静态强类型语言,对于每一次的函数调用,编译时都会检查其实参,必须与形参类型相同,或可被转换为该类型. 参数传递 普通的非引用类型的参数通过复制对应的实参实现初始化.引用形参直接 ...

  4. js获取元素的页面坐标

    一.DOM中各种宽度.高度 二.DOM中的坐标系 JS获取div元素的宽度 offsetWidth=width+padding-left+padding-right+border-left+borde ...

  5. MySQL分表操作的例子

    USE project;DROP PROCEDURE IF EXISTS project.delete_test_user;delimiter $$CREATE PROCEDURE project.d ...

  6. Luogu P5352 Terrible Homework

    神仙@TheLostWeak出的题,因为他最近没时间所以我先写一下sol(其实我也没什么时间) 作为一道简单的数据结构题想必大家都能看出必须用LCT维护信息吧 一个朴素的想法就是直接维护四种操作的值, ...

  7. 在tomcat中配置连接池

    在tomcat的conf/Catalina/localhost目录下配置项目路径,tomcat启动是会直接根据配置去加载项目. 虽然配置就一句话,但经常忘,今天记下来. 如果你的项目成名是:mypro ...

  8. Codeforces 1012A Photo of The Sky

    作为一个蒟蒻,\(\tt{CF}\)止步\(Div.2\;C\) 这个题主要考察思维,正解代码炒鸡短-- 以下大部分搬运自官方题解 题目大意: 给你一段长度为\(2n\)的数列,将这个数列分为两个可重 ...

  9. Quartz监听的端口

    上海移通短信网关:556重庆移动短信网关:557消息中心后台维护服务:558网页订单数据同步服务:559基础数据同步程序:560短信数据扣除服务:565基础数据维护服务:589推送数据抓取服务:222 ...

  10. shell脚本调试打印日志问题

    shell脚本调试打印日志问题 1. 需求 我们在编写脚本的时候,有时候需要做调试,便于我们定位问题,有时候等脚本上线之后,我们需要保留脚本执行过程中的记录.便于我们在出问题的时候,定位问题. 2. ...