- 所在位置：
- 首頁 >
- 編程技術(shù) >
- CSS/HTML >
- CSS中實現(xiàn)圖片垂直居中的代碼是什么
CSS中實現(xiàn)圖片垂直居中的代碼是什么
Admin 2022-05-25 群英技術(shù)資訊 1117 次瀏覽
在這篇文章中，我們來學(xué)習(xí)一下“CSS中實現(xiàn)圖片垂直居中的代碼是什么”的相關(guān)知識，下文有詳細(xì)的講解，易于大家學(xué)習(xí)和理解，有需要的朋友可以借鑒參考，下面就請大家跟著小編的思路一起來學(xué)習(xí)一下吧。方法：1、給照片元素的父元素添加相對定位樣式，給照片元素添加絕對定位樣式；2、利用top屬性和“margin-top”屬性設(shè)置照片垂直居中，只需要給照片元素添加“top:50%;margin-top:上外邊距值;”樣式即可。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
css怎么讓照片垂直居中
用絕對定位實現(xiàn)垂直居中
1、給img的父元素添加相對定位屬性（position: relative），同時，要給子元素也就是圖片img元素添加絕對定位屬性（position: absolute）。
2、將圖片元素的top屬性設(shè)置為50%。
3、現(xiàn)在我們需要給img元素設(shè)置一個負(fù)的margin-top值，這個值為你想要實現(xiàn)垂直居中的元素高度的一半，*如果不確定元素的高度，可以不使用margin-top，而是使用transform:translateY(-50%);屬性。
記?。喝绻阆胍瑫r實現(xiàn)水平居中，那么你可以用實現(xiàn)垂直居中的一樣的技巧來實現(xiàn)。
示例如下：
<html>
<head>
<style type="text/css">
.posdiv{
width: 300px;
height: 250px;
position: relative;
border:1px solid red;
}
.posdiv img{
width: 100px;
position: absolute;
top: 50%;
margin-top: -50px;
}
</style>
</head>
<body>
<div class="posdiv">
<img src="1118.02.png" alt="">
</div>
</body>
</html>輸出結(jié)果：
以上就是關(guān)于“CSS中實現(xiàn)圖片垂直居中的代碼是什么”的相關(guān)知識，感謝各位的閱讀，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注群英網(wǎng)絡(luò)，小編每天都會為大家更新不同的知識。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：[email protected]進(jìn)行舉報，并提供相關(guān)證據(jù)，查實之后，將立刻刪除涉嫌侵權(quán)內(nèi)容。
猜你喜歡
-
CSS簡寫屬性會覆蓋其他樣式嗎，簡寫值的順序是什么
簡寫屬性是用于同時給多個屬性賦值的屬性。比如font是一個簡寫屬性，可以用于設(shè)置多種字體屬性。它指定了font-style、font-weight、font-size、font-height以及font-family。
-
用CSS3怎樣做switch組件開關(guān)的效果
這篇文章主要介紹了如何用css3實現(xiàn)switch組件的方法的相關(guān)資料,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
-
Flex布局默認(rèn)高度是怎樣的，如何保持自身高度
在用了Flex布局會發(fā)現(xiàn)，當(dāng)水平排列后，會發(fā)現(xiàn)所有子項的高度都變成一樣的了。這是因為Flex 布局會默認(rèn)：把所有子項變成水平排列。默認(rèn)不自動換行。讓子項與其內(nèi)容等寬，并把所有子項的高度變?yōu)樽罡咦禹椀母叨?。這樣設(shè)置背景色的時候非常不...
-
Amazeui時間組件能夠?qū)崿F(xiàn)什么樣效果，用法是怎樣
這篇文章主要介紹了amazeui時間組件的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
-
CSS中清除浮動的小技巧有多少
css清除浮動的方法：1、給父div定義高度。2、使用空元素。3、讓父級div也一起浮起。4、父級div定義display:table。5、父元素設(shè)置overflow：hidden,auto。6、父級div定義偽類。
推薦內(nèi)容
- CSS中flex布局如何實現(xiàn)自動換行？
- 在HTML中如何讓button居中，有幾種方法
- JS中怎樣刪除數(shù)組末尾元素？教你兩種方法
- vue怎樣獲取url參數(shù)?教你兩種方法
- 如何用Python計算BMI指數(shù)？一文帶你看懂
- python怎樣獲取數(shù)組元素的下標(biāo)？教你三種方法
- python中的ord函數(shù)有什么用？用法是什么？
- Python中array與list轉(zhuǎn)換如何做，方法是什么
- 在CSS中怎么實現(xiàn)一條橫線，方法是什么
- Python怎樣設(shè)計串口之間通信的程序
- phpstorm怎么使用和操作？一文帶你快速了解
- vue怎么給對象數(shù)組賦值？this.$set方法幫你解決
成為群英會員,開啟智能安全云計算之旅
立即注冊友鏈合作 群英網(wǎng)絡(luò) 智帝云 主機(jī)評測 idc公司 商城系統(tǒng) 跨境電商 主機(jī)吧 酷庫博客 OA系統(tǒng) 騰訊企業(yè)郵箱 銳成信息 sdwan
關(guān)注或聯(lián)系群英網(wǎng)絡(luò)
7x24小時售前：400-678-4567
7x24小時售后：0668-2555666
24小時QQ客服
群英微信公眾號
CNNIC域名投訴舉報處理平臺
服務(wù)電話：010-58813000
服務(wù)郵箱：[email protected]
投訴與建議：0668-2555555
Copyright ? QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版權(quán)所有
增值電信經(jīng)營許可證 : B1.B2-20140078 ICP核準(zhǔn)（ICP備案）粵ICP備09006778號 域名注冊商資質(zhì) 粵 D3.1-20240008
