900字范文 > HTML学习笔记：让div在屏幕居中图片在div里居中

HTML学习笔记：让div在屏幕居中图片在div里居中

时间：2019-06-07 12:48:55

一、效果演示

二、实现方法

方法一：利用CSS实现

方法二：利用JavaScript实现

方法三：利用JavaScript实现

方法四：利用jQuery实现

一、效果演示

二、实现方法

方法一：利用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无论在哪种情况下都能拿到元素的宽度和高度，建议使用这种方式。

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。