欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > css3案例分享 >

Css利用position定位实现img图片居中的3种方法(代码实例)

发布时间:2019-05-24  编辑:杨雨个人博客网站   点击:   

Css怎么让img图片居中显示?在之前的文章【Css如何让img图片居中?Css的display属性实现图片居中】中我们介绍了display属性实现图片居中的两种方法,本篇文章我们给大家带来Css利用position定位实现img图片居中的3种方法(代码实例)。有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

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

<!DOCTYPE Html>
<Html>
	<head>
		<meta charset="UTF-8">
		<title>img图片居中</title>
		<style>
			*{margin: 0;padding:0;}
			.demo{
				width: 400px;
		        height: 300px;
		        margin: 50px auto;
		        border: 1px dashed #000;
		        position: relative;
			}
			.demo img{
				width: 200px;
				height: 150px;
				position: absolute;
		        top: 50%;
		        left: 50%;
		        margin-top: -75px; /* 高度的一半 */
		        margin-left: -100px; /* 宽度的一半 */
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<img src="1.jpg" />
		</div>
	</body>
</Html>

效果图:

1.jpg

说明:

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

2.jpg

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

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

3.jpg

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

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

<!DOCTYPE Html>
<Html>
	<head>
		<meta charset="UTF-8">
		<title>img图片居中</title>
		<style>
			*{margin: 0;padding:0;}
			.demo{
				width: 400px;
		        height: 300px;
		        margin: 50px auto;
		        border: 1px dashed #000;
		        position: relative;
			}
			.demo img{
				width: 200px;
				height: 150px;
				position: absolute;
		        top: 50%;
		        left: 50%;
		        transform: translate(-50%,-50%);
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<img src="1.jpg" />
		</div>
	</body>
</Html>

效果图:

1.jpg

说明:

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

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

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

<!DOCTYPE Html>
<Html>
	<head>
		<meta charset="UTF-8">
		<title>img图片居中</title>
		<style>
			*{margin: 0;padding:0;}
			.demo{
				width: 400px;
		        height: 300px;
		        margin: 50px auto;
		        border: 1px dashed #000;
		        position: relative;
			}
			.demo img{
				width: 200px;
				height: 150px;
				position: absolute;
		        top: 0;
		        left: 0;
		        right: 0;
		        bottom: 0;
		        margin: auto;
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<img src="1.jpg" />
		</div>
	</body>
</Html>

效果图:

1.jpg

说明:

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

5.jpg

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

总结:以上就是Css position定位实现img图片居中3种方法的全部介绍,希望能对大家的学习有所帮助。更多相关教程请访问 CSS3视频教程Html5视频教程bootstrap视频教程! 本文地址:http://itbyc.com/web/css3/20533.html
转载请注明出处。

分享是一种快乐,也是一种美德:
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1