HTML学习笔记：让div在屏幕居中，图片在div里居中
【摘要】
目录
一、效果演示
二、实现方法
方法一：利用CSS实现
方法二：利用JavaScript实现
方法三：利用JavaScript实现
方法四：利用jQuery实现
一、效果演示
二、实现方法
方法一：利用CSS实现
<!DOCTYPE html><html lang="e...
目录
一、效果演示
二、实现方法
方法一：利用CSS实现
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>demo01</title>
-
<style type="text/css">
-
#div {
-
width: 400px;
-
height: 350px;
-
background-color: #c8e5bc;
-
position: absolute;
-
top:50%;
-
left: 50%;
-
margin: -200px 0 0 -175px;
-
}
-
-
#img {
-
width: 220px;
-
height: 220px;
-
position: absolute;
-
top:50%;
-
left: 50%;
-
margin: -110px 0 0 -110px;
-
}
-
</style>
-
</head>
-
<body>
-
<div id="div">
-
<img id="img" src="images/product4.jpg">
-
</div>
-
</body>
-
</html>
方法二：利用JavaScript实现
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>demo02</title>
-
<style type="text/css">
-
#div {
-
width: 400px;
-
height: 350px;
-
background-color: #c8e5bc;
-
}
-
-
#img {
-
width: 220px;
-
height: 220px;
-
}
-
</style>
-
-
<script type="text/javascript">
-
-
function centerDiv() {
-
var div = document.getElementById('div');
-
var width = div.offsetWidth;
-
var height = div.offsetHeight;
-
div.style.position = "absolute";
-
div.style.left = "50%";
-
div.style.top = "50%";
-
div.style.marginLeft = "-" + (width / 2) + "px";
-
div.style.marginTop = "-" + (height / 2) + "px";
-
}
-
-
function centerImg() {
-
var img = document.getElementById('img');
-
var width = img.offsetWidth;
-
var height = img.offsetHeight;
-
img.style.position = "absolute";
-
img.style.left = "50%";
-
img.style.top = "50%";
-
img.style.marginLeft = "-" + (width / 2) + "px";
-
img.style.marginTop = "-" + (height / 2) + "px";
-
}
-
-
window.onload = function(){
-
centerDiv();
-
centerImg();
-
}
-
-
window.onresize = function () {
-
centerDiv();
-
centerImg();
-
}
-
</script>
-
-
</head>
-
<body>
-
<div id="div">
-
<img id="img" src="images/product4.jpg">
-
</div>
-
</body>
-
</html>
方法三：利用JavaScript实现
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>demo03</title>
-
<style type="text/css">
-
#div {
-
width: 400px;
-
height: 350px;
-
background-color: #c8e5bc;
-
}
-
-
#img {
-
width: 220px;
-
height: 220px;
-
}
-
</style>
-
-
<script type="text/javascript">
-
-
function centerDiv() {
-
var totalWidth = document.body.scrollWidth;
-
var totalHeight = document.body.scrollHeight;
-
-
var div = document.getElementById('div');
-
var width = div.offsetWidth;
-
var height = div.offsetHeight;
-
-
div.style.position = "absolute";
-
div.style.left = (totalWidth - width) / 2 + "px";
-
div.style.top = (totalHeight - height) / 2 + "px";
-
}
-
-
function centerImg() {
-
var div = document.getElementById('div');
-
var totalWidth = div.offsetWidth;
-
var totalHeight = div.offsetHeight;
-
-
var img = document.getElementById('img');
-
var width = img.offsetWidth;
-
var height = img.offsetHeight;
-
-
img.style.position = "absolute";
-
img.style.left = (totalWidth - width) / 2 + "px";
-
img.style.top = (totalHeight - height) / 2 + "px";
-
}
-
-
window.onload = function(){
-
centerDiv();
-
centerImg();
-
}
-
-
window.onresize = function () {
-
centerDiv();
-
centerImg();
-
}
-
</script>
-
-
</head>
-
<body>
-
<div id="div">
-
<img id="img" src="images/product4.jpg">
-
</div>
-
</body>
-
</html>
方法四：利用jQuery实现
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>demo04</title>
-
<script src="scripts/jquery-3.1.1.min.js"></script>
-
<style type="text/css">
-
#div {
-
width: 400px;
-
height: 350px;
-
background-color: #c8e5bc;
-
}
-
-
#img {
-
width: 220px;
-
height: 220px;
-
}
-
</style>
-
-
<script type="text/javascript">
-
-
$(window).resize(function () {
-
$('#div').css({
-
position: "absolute",
-
left: ($(window).width() - $('#div').width()) / 2,
-
top: ($(window).height() - $('#div').height()) / 2
-
}
-
);
-
$('#img').css({
-
position: "absolute",
-
left: ($('#div').width() - $('#img').width()) / 2,
-
top: ($('#div').height() - $('#img').height()) / 2
-
}
-
);
-
});
-
-
$(function () {
-
$(window).resize();
-
})
-
</script>
-
-
</head>
-
<body>
-
<div id="div">
-
<img id="img" src="images/product4.jpg">
-
</div>
-
</body>
-
</html>
说明：获取元素的宽度和高度，如果是行内样式，那么 元素.style.width和 元素.style.height可以拿到元素的宽度和高度，但是对于内部样式或外部样式，此方法就不凑效，必须使用 元素.offsetWidth和 元素.offsetHeight才能拿到元素的宽度和高度。其实用 元素.offsetWidth和 元素.offsetHeight无论在哪种情况下都能拿到元素的宽度和高度，建议使用这种方式。
文章来源: howard2005.blog.csdn.net，作者：howard2005，版权归原作者所有，如需转载，请联系作者。
原文链接：howard2005.blog.csdn.net/article/details/79357676
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）