博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
DIV垂直/水平居中2(DIV宽度和高度是动态的)
阅读量:4964 次
发布时间:2019-06-12

本文共 819 字,大约阅读时间需要 2 分钟。

<!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设置DIV的CSS,获取DIV的左、上的边距偏移量,边距偏移量的算法就是用页面窗口的宽度减去该DIV得宽度,得到的值再除以2即左偏移量,右偏移量算法相同

转载于:https://www.cnblogs.com/yangAL/p/5386629.html

你可能感兴趣的文章
JavaScript 图表库 xCharts
查看>>
Android项目的目录结构
查看>>
C++中“引用”的底层实现
查看>>
Spring Cloud与微服务构建:微服务简介
查看>>
Babel 是干什么的
查看>>
cocos2dx-3.0(8)------Label、LabelTTF、LabelAtlas、LabelBMFont使用之法
查看>>
CODE[VS] 1842 递归第一次
查看>>
20180418小测
查看>>
数字三角形
查看>>
NGUI 减少drawcall规则
查看>>
三元表达,匿名函数
查看>>
前端笔记-基础笔记
查看>>
【LeetCode & 剑指offer刷题】查找与排序题6:33. Search in Rotated Sorted Array(系列)
查看>>
GNU/Linux超级本ZaReason Ultralap 440体验
查看>>
将github上托管的代码 在我的域名下运行
查看>>
【Manthan, Codefest 18 (rated, Div. 1 + Div. 2) C】Equalize
查看>>
【codeforces 767A】Snacktower
查看>>
【MemSQL Start[c]UP 3.0 - Round 1 C】 Pie Rules
查看>>
Ognl中“%”、“#”、“$”详解
查看>>
我对应用软件——美团的看法
查看>>