css利用position定位實現img圖片居中的3種方法（程式碼實例）
- 青灯夜游原創
- 2018-10-19 12:00:3610742瀏覽
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="css利用position定位實現img圖片居中的3種方法（程式碼實例）" / alt="css利用position定位實現img圖片居中的3種方法（程式碼實例）" >
</div>
</body>
</html>效果圖：
說明：
將demo盒子設定成相對定位relative，將img設定成絕對定位absolute，left:50%，top:50%，此時圖片的左上角位於div的中心。
想要圖片居中，圖片的中心和demo盒子的中心要重合，因此就需要將圖片向上移動圖片高度的一半，並向左移動圖片寬度的一半。
margin-top: -75px; /* 高度的一半 */ margin-left: -100px; /* 宽度的一半 */
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="css利用position定位實現img圖片居中的3種方法（程式碼實例）" / alt="css利用position定位實現img圖片居中的3種方法（程式碼實例）" >
</div>
</body>
</html>效果圖：
說明：
設定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="css利用position定位實現img圖片居中的3種方法（程式碼實例）" / alt="css利用position定位實現img圖片居中的3種方法（程式碼實例）" >
</div>
</body>
</html>效果圖：
說明：
將demo盒子設定成相對定位relative，將img設定成絕對定位absolute、top: 0、 left: 0、 right: 0、 bottom: 0，此時圖片的左上角與demo盒子左上角重合：
在使用margin: auto;讓img圖片相對於demo盒子進行水平和垂直方向的居中對齊，就可以實現圖片居中效果。
總結：以上就是css position定位實現img圖片居中3種方法的全部介紹，希望能對大家的學習有所幫助。更多相關教學請訪問 CSS3影片教學，Html5影片教學，bootstrap影片教學！
以上是css利用position定位實現img圖片居中的3種方法（程式碼實例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！