translate(x，y) x,y的值都是百分比的话，这个百分比是参照什么来计算的？
慕UI1237056
2016-03-31 11:36
教程上说“translate()函数可以将元素向指定的方向移动，类似于position中的relative。或以简单的理解为，使用translate()函数，可以把元素从原来的位置移动，而不影响在X、Y轴上的任何Web组件。” 。。要实现水平垂直居中，只用translate（50%;50%）为什么不可以呢？
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>变形与动画</title>
<link href="style.css" rel="stylesheet" type="text/css">
<style>
.wrapper {
padding: 20px;
background:orange;
color:#fff;
position:absolute;
top:50%;
left:50%; /*如果把这几行删掉，为什么不可以居中了呢 */
border-radius: 5px;
-webkit-transform:translate(-50%, -50%);
-moz-transform:translate(-50%, -50%);
transform:translate( -50%, -50%);
}</style>
</head>
<body>
<div class="wrapper">
我不知道我的宽度和高是多少，我要实现水平垂直居中
</div>
</body>
</html>
1回答
-
- 超高校级毕业生3123507
- 2016-03-31 13:49:55
translate(x,y) 括号里填百分比数据的话，会以本身的长宽做参考，比如，本身的长为100px，高为50px. 那填(50%,50%)
就是向右，向下移动50px，添加负号就是向着相反的方向移动
如果设置了position:absolute;
top:50%
那你DIV的左边边框会移动到你父级（现在你的代码，DIV的父级就是body）的中央，而不是你的DIV的中心与body
的中心重合，所以不剧中
十天精通CSS3
242220 学习 · 2623 问题
相似问题