transform - css3 translate 的水平垂直居中問題求解
問題描述
transform: translate(50%, 50%)
為什么能夠使一個(gè)元素水平垂直居中？
問題解答
回答1：這樣寫并不能使一個(gè)元素水平垂直居中，只能使元素在當(dāng)前位置分別往x軸和y軸正向平移自身寬度的一半距離。
之前答過一個(gè)題，樓主可以看一下，也許有一些幫助。
translate
回答2：<!DOCTYPE html><html lang='zh-CN'><head> <!--author:Vace_Vlm(ocdo@qq.com),create:2016年5月21日 下午10:45--> <meta charset='UTF-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1' /> <title>title</title> <style>*{ padding: 0;margin: 0;}html,body{ width:100%; height:100%;}.box{ position:relative; top:50%; left:50%; width:200px; height:200px; background:red; transform:translate(-50%,-50%); transform-origin:50% 50%;} </style></head><body> <p class='box'></p></body></html>回答3：
這樣寫并不能直接居中，可以定位，然后left:50%; 這個(gè)時(shí)候定位原點(diǎn)是父層的定位元素，然后使用translateX(-50%)；這時(shí)候是相對(duì)于這個(gè)元素本身向左移動(dòng)一半，最終效果剛好是居中的。
相關(guān)文章：
1. javascript - 怎么實(shí)現(xiàn)移動(dòng)端頁(yè)面滑動(dòng)切換，從1可以滑到2 但是不能從2滑回1 這樣的效果呢？2. javascript - JS設(shè)置Video視頻對(duì)象的currentTime時(shí)出現(xiàn)了問題,IE,Edge,火狐,都可以設(shè)置,反而chrom卻...3. 求大神幫我看看是哪里寫錯(cuò)了 感謝細(xì)心解答4. php自學(xué)從哪里開始？5. 網(wǎng)頁(yè)爬蟲 - python爬蟲翻頁(yè)問題，請(qǐng)問各位大神我這段代碼怎樣翻頁(yè)，還有價(jià)格要登陸后才能看到，應(yīng)該怎么解決6. javascript - 如果所有請(qǐng)求都放到actions 里面，那拿到的數(shù)據(jù)應(yīng)該 放在哪里，state 還是vue實(shí)例里面的data？7. 數(shù)據(jù)庫(kù) - MySQL 單表500W+數(shù)據(jù)，查詢超時(shí)，如何優(yōu)化呢？8. mysql多表查詢9. phpstady在win10上運(yùn)行10. python - from ..xxxx import xxxx到底是什么意思呢?
網(wǎng)公網(wǎng)安備