溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

web中怎么用絕對(duì)定位實(shí)現(xiàn)垂直居中

發(fā)布時(shí)間：2022-03-01 10:20:03 來(lái)源：億速云 閱讀：108 作者：小新 欄目：web開(kāi)發(fā)

這篇文章主要介紹了web中怎么用絕對(duì)定位實(shí)現(xiàn)垂直居中，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

HTML代碼：

<div class="posdiv">
<img src="1.jpg" alt="">
</div>

CSS代碼：

body{bac千克round: #ccc;}
.posdiv{width: 300px;height: 250px;background: #fff;position: relative; margin:0 auto}
.posdiv img{width: 100px;position: absolute;top: 50%;margin-top: -50px;}

詮釋：
1、一張包裹在div中的img圖片，咱們給不但給圖片以及div元素界說(shuō)了尺寸，還給div元素界說(shuō)了#fff的布風(fēng)光(布景色采或是遵循需求設(shè)置裝備擺設(shè))。
2、給img的父元素增長(zhǎng)相對(duì)定位屬性（position: relative），同時(shí)，要給子元素也等于圖片img元素增多絕對(duì)定位屬性（position: absolute）。
3、將圖片元素的top屬性設(shè)置裝備擺設(shè)為50%。
4、那時(shí)咱們需求給img元素設(shè)置裝備擺設(shè)一個(gè)負(fù)的margin-top值，這個(gè)值為你想要實(shí)現(xiàn)垂直居中的元素高度的一半，*假如不注定元素的高度，也許不運(yùn)用margin-top，而是應(yīng)用transform:translateY(-50%);屬性。
記?。喝羰悄阆胍瑫r(shí)完成水準(zhǔn)居中，那末你或者用實(shí)現(xiàn)垂直居中的同樣的本領(lǐng)來(lái)完成。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“web中怎么用絕對(duì)定位實(shí)現(xiàn)垂直居中”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

web
AI
助
手