transform - css3 translate 的水平垂直居中問題求解
問題描述
transform: translate(50%, 50%)
為什么能夠使一個元素水平垂直居中?
問題解答
回答1:這樣寫并不能使一個元素水平垂直居中,只能使元素在當前位置分別往x軸和y軸正向平移自身寬度的一半距離。
之前答過一個題,樓主可以看一下,也許有一些幫助。
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%; 這個時候定位原點是父層的定位元素,然后使用translateX(-50%);這時候是相對于這個元素本身向左移動一半,最終效果剛好是居中的。
相關文章:
1. angular.js - 三大框架react、vue、angular的分析2. javascript - 百度地圖自己的產品可以精確定位,為什么我調用他的公開API卻必須經過用戶同意才能獲取精確定位,而且還慢?3. angular.js - 求問大神?angularjs加載外部的html模板。有閃動如何解決4. 隨機產生200個小寫英文字母,并統計個數,這是在網上看到的粒子,我想問怎樣把它變得更簡便?5. angular.js - 用angularjs的service封裝百度地圖api出錯,請問原因?6. php自學從哪里開始?7. javascript - react+百度地圖8. node.js - vue-resource,如何改變響應格式?9. windows10 - mysql時區問題10. html5 - 如何禁止百度轉碼?
