关于translate(x,y)及居中问题
当translate(x,y)中的x,y都为百分比的时候是依照什么作为参考?是不是自身大小的百分比?
关于居中问题
代码如下:
<!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>
请指教,非常感谢!