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. javascript - js 寫一個正則 提取文本中的數據2. javascript - 為什么我的vue里的router-link不起作用3. javascript - js一個小的算法問題，找個好一點的答案。4. javascript - vue子路由匹配渲染到頂級視圖層問題5. 算法 - python 給定一個正整數a和一個包含任意個正整數的 列表 b，求所有<=a 的加法組合6. javascript - 游戲里物體角色層次渲染邏輯和代碼怎么寫才好？7. javascript - 發現個奇怪的問題，寫的css動畫當我把標簽頁收起時動畫自動暫停了8. javascript - 新組成的數組打印出來出現問題，里面有對象，但長度為空9. javascript - 關于Lazyload遇到的問題10. javascript - 如果根據參數給table中的tr綁定不同事件
網公網安備