您好,登錄后才能下訂單哦!
這篇“CSS中translate實(shí)現(xiàn)水平垂直居中效果的方法”除了程序員外大部分人都不太理解,今天小編為了讓大家更加理解“CSS中translate實(shí)現(xiàn)水平垂直居中效果的方法”,給大家總結(jié)了以下內(nèi)容,具有一定借鑒價(jià)值,內(nèi)容詳細(xì)步驟清晰,細(xì)節(jié)處理妥當(dāng),希望大家通過這篇文章有所收獲,下面讓我們一起來(lái)看看具體內(nèi)容吧。
translate(-50%,-50%) 屬性:
向上和左,移動(dòng)自身長(zhǎng)寬的 50%,使其居于中心位置。
與使用margin實(shí)現(xiàn)居中不同的是,margin必須知道自身的寬高,而translate可以在不知道寬高的情況下進(jìn)行居中,tranlate函數(shù)中的百分比是相對(duì)于自身寬高的百分比
(使用top和left為50%時(shí),以窗口左上角為原點(diǎn))。
示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style media="screen"> .container { position: relative; width: 50%; } .container img { width: 100%; display: block; height: auto; } .overlay { width: 100%; height: 100%; position: absolute; left: 0; top: 0; right: 0; bottom: 0; opacity: 0; transition: 0.5s ease; background: rgb(0, 0, 0); } .container:hover .overlay { opacity: 0.5; } .text { color: white; font-size: 20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); } </style> </head> <body> <h3>淡入效果</h3> <div class="container"> <img src="./img/photo2.jpg" alt="Avatar" class="image"> <div class="overlay"> <div class="text">Hello World</div> </div> </div> </body> </html>
效果:
感謝你的閱讀,希望你對(duì)“CSS中translate實(shí)現(xiàn)水平垂直居中效果的方法”這一關(guān)鍵問題有了一定的理解,具體使用情況還需要大家自己動(dòng)手實(shí)驗(yàn)使用過才能領(lǐng)會(huì),快去試試吧,如果想閱讀更多相關(guān)知識(shí)點(diǎn)的文章,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(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)容。