溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹css利用position定位實(shí)現(xiàn)img圖片居中的方法有哪些，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！
1、css position定位設(shè)置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>效果圖：
說明：
將demo盒子設(shè)置成相對定位relative，將img設(shè)置成絕對定位absolute，left:50%，top:50%，此時(shí)圖片的左上角位于div的中心。
想要圖片居中，圖片的中心和demo盒子的中心要重合，因此就需要將圖片向上移動(dòng)圖片高度的一半，并向左移動(dòng)圖片寬度的一半。
margin-top: -75px; /* 高度的一半 */ margin-left: -100px; /* 寬度的一半 */
2、css position定位設(shè)置img圖片居中，不知道img圖片的寬、高
1）、css position定位+transform實(shí)現(xiàn)圖片居中
<!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>效果圖：
說明：
設(shè)置left:50%，top:50%，讓圖片的左上角位于demo盒子的中心；此時(shí)只要圖片中心和demo盒子中心重合就可以實(shí)現(xiàn)圖片居中了。（具體看方法一）
那么如何讓圖片中心和demo盒子中心重合？我們需要將圖片向上移動(dòng)圖片高度的一半，并向左移動(dòng)圖片寬度的一半。但又不知道圖片的寬高值，這要怎么辦？這個(gè)時(shí)候我們使用transform: translate(-50%,-50%);就可以實(shí)現(xiàn)想要的效果。
2）、css position定位+margin實(shí)現(xiàn)圖片居中
<!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>效果圖：
說明：
將demo盒子設(shè)置成相對定位relative，將img設(shè)置成絕對定位absolute、top: 0、 left: 0、 right: 0、 bottom: 0，此時(shí)圖片的左上角與demo盒子左上角重合：
在使用margin: auto;讓img圖片相對于demo盒子進(jìn)行水平和垂直方向的居中對齊，就可以實(shí)現(xiàn)圖片居中效果。
以上是css利用position定位實(shí)現(xiàn)img圖片居中的方法有哪些的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼