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 - 请问这段 el && fn.call(el, e, el)代码这么写什么意思？2. pdo_mysql 值自增写法3. css - 这些字体是怎么弄的？4. 如何解决tp6在zend中无代码提示5. python - requests post问题6. javascript - JS 里面的 delete object.key 到底删除了什么？7. javascript - chart.js如何修改某个指定bar的颜色8. html - 关于css选择器的问题9. python - 怎样在linux下开发flask web应用时查看代码出错（traceback）的地方。10. PHP中的$this代表当前的类还是方法？
网公网安备