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 - angularjs 使用鼠标悬停时，标签一直闪2. c++ - win764位环境下，我用GCC为什么指针占8个字节，而long是4个字节？3. html5 - HTML代码中的文字乱码是怎么回事？4. 一个走错路的23岁傻小子的提问5. node.js - 函数getByName()中如何使得co执行完后才return6. java - 安卓电视盒子取得了root权限但是不能安装第三方应用，请问该怎么办？7. android - 安卓activity无法填充屏幕8. python 计算两个时间相差的分钟数，超过一天时计算不对9. javascript - SuperSlide.js火狐不兼容怎么回事呢10. python - django 里自定义的 login 方法，如何使用 login_required()
网公网安备