<!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. ES-windos环境搭建(2)

    下载 打开elasticsearch官网.选择downloads. 选择elasticsearch,并单击Download. 这里我们不选择最新版,而是选择靠前的版本,下拉选择past release ...

  2. Gitlab User Guide

    Installation Configuration Set user name and email Add SSH keys Repository Create New Repository Clo ...

  3. EJB配置jboss数据源

    1.数据源的模板在\jboss-4.2.3.GA-jdk6\jboss-4.2.3.GA\docs\examples\jca\下2.编辑数据源文件,比如mysql-ds.xml,命名规则是名称-ds. ...

  4. TLint for 虎扑体育应用源码项目

    虎扑非官方客户端TLint全新Material Design设计,简洁美观支持论坛全部操作,浏览帖子.点亮.回复.引用.收藏等多项个性化设置(不同主题,不同阅读模式) TLint For 虎扑体育 更 ...

  5. （五）mybatis之下载与基本构成

    1.  下载MyBatis. 输入网址:https://github.com/mybatis/mybatis-3/releases 进入Mybatis下载页面,选择第一个选项,然后就可以加载到myba ...

  6. IOS Array 排序方法

    NSArray *sortedArray = [array sortedArrayUsingComparator: ^(id obj1, id obj2) { if ([obj1 integerVal ...

  7. android-menudrawer-master 使用

    1. 参照例子写, 运行总崩溃, 多半是导库问题... 2. 既然这样不行, 只好将源码全部拷贝到工程中了. 然后修错误, (将需要的res 文件复制过来.主要是value中的几个文件) 3. 在Ma ...

  8. dp 20190618

    C. Party Lemonade 这个题目是贪心,开始我以为是背包,不过也不太好背包,因为这个L都已经是1e9了. 这个题目怎么贪心呢?它是因为这里有一个二倍的关系,所以说val[i]=val[i- ...

  9. PyTorch在NLP任务中使用预训练词向量

    在使用pytorch或tensorflow等神经网络框架进行nlp任务的处理时,可以通过对应的Embedding层做词向量的处理,更多的时候,使用预训练好的词向量会带来更优的性能.下面分别介绍使用ge ...

  10. faster rcnn需要理解的地方

    http://blog.csdn.net/terrenceyuu/article/details/76228317 https://www.cnblogs.com/houkai/p/6824455.h ...