css利用position定位实现img图片居中的方法有哪些

这篇文章主要介绍css利用position定位实现img图片居中的方法有哪些,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

创新互联坚持“要么做到,要么别承诺”的工作理念,服务领域包括:网站设计、成都做网站、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的龙岩网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!

1、css position定位设置img图片居中,知道img图片的宽、高



	
		
		img图片居中
		
	
	
		

效果图:

css利用position定位实现img图片居中的方法有哪些

说明:

将demo盒子设置成相对定位relative,将img设置成绝对定位absolute,left:50%,top:50%,此时图片的左上角位于div的中心。

css利用position定位实现img图片居中的方法有哪些

想要图片居中,图片的中心和demo盒子的中心要重合,因此就需要将图片向上移动图片高度的一半,并向左移动图片宽度的一半。

margin-top: -75px; /* 高度的一半 */
margin-left: -100px; /* 宽度的一半 */

css利用position定位实现img图片居中的方法有哪些

2、css position定位设置img图片居中,不知道img图片的宽、高

1)、css position定位+transform实现图片居中



	
		
		img图片居中
		
	
	
		

效果图:

css利用position定位实现img图片居中的方法有哪些

说明:

设置left:50%,top:50%,让图片的左上角位于demo盒子的中心;此时只要图片中心和demo盒子中心重合就可以实现图片居中了。(具体看方法一)

那么如何让图片中心和demo盒子中心重合?我们需要将图片向上移动图片高度的一半,并向左移动图片宽度的一半。但又不知道图片的宽高值,这要怎么办?这个时候我们使用transform: translate(-50%,-50%);就可以实现想要的效果。

2)、css position定位+margin实现图片居中



	
		
		img图片居中
		
	
	
		

效果图:

css利用position定位实现img图片居中的方法有哪些

说明:

将demo盒子设置成相对定位relative,将img设置成绝对定位absolute、top: 0、 left: 0、 right: 0、 bottom: 0,此时图片的左上角与demo盒子左上角重合:

css利用position定位实现img图片居中的方法有哪些

在使用margin: auto;让img图片相对于demo盒子进行水平和垂直方向的居中对齐,就可以实现图片居中效果。

以上是css利用position定位实现img图片居中的方法有哪些的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!


当前名称:css利用position定位实现img图片居中的方法有哪些
转载来于:http://myzitong.com/article/gpddeh.html