css利用position定位實現img圖片居中的3種方法（程式碼實例）-css教學-PHP中文網

首頁

web前端

css教學

css利用position定位實現img圖片居中的3種方法（程式碼實例）

青灯夜游

Oct 19, 2018 pm 12:00 PM

position定位

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="/static/imghw/default1.png"  data-src="css利用position定位實現img圖片居中的3種方法（程式碼實例）"  class="lazy"   / alt="css利用position定位實現img圖片居中的3種方法（程式碼實例）" >
		</div>
	</body>
</html>

登入後複製

效果圖：

css利用position定位實現img圖片居中的3種方法（程式碼實例）

說明：

將demo盒子設定成相對定位relative，將img設定成絕對定位absolute，left:50%，top:50%，此時圖片的左上角位於div的中心。

css利用position定位實現img圖片居中的3種方法（程式碼實例）

想要圖片居中，圖片的中心和demo盒子的中心要重合，因此就需要將圖片向上移動圖片高度的一半，並向左移動圖片寬度的一半。

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

登入後複製

css利用position定位實現img圖片居中的3種方法（程式碼實例）

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="/static/imghw/default1.png"  data-src="css利用position定位實現img圖片居中的3種方法（程式碼實例）"  class="lazy"   / alt="css利用position定位實現img圖片居中的3種方法（程式碼實例）" >
		</div>
	</body>
</html>

登入後複製

效果圖：

css利用position定位實現img圖片居中的3種方法（程式碼實例）

說明：

設定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="/static/imghw/default1.png"  data-src="css利用position定位實現img圖片居中的3種方法（程式碼實例）"  class="lazy"   / alt="css利用position定位實現img圖片居中的3種方法（程式碼實例）" >
		</div>
	</body>
</html>

登入後複製

效果圖：

css利用position定位實現img圖片居中的3種方法（程式碼實例）

說明：

將demo盒子設定成相對定位relative，將img設定成絕對定位absolute、top: 0、 left: 0、 right: 0、 bottom: 0，此時圖片的左上角與demo盒子左上角重合：

css利用position定位實現img圖片居中的3種方法（程式碼實例）