关于translate(x,y）及居中问题
闹钟___你别闹
2016-04-23 12:13
当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>
请指教，非常感谢!
3回答
-
- Frank_Yuan
- 2016-07-22 21:39:36
纠正一下楼上的。left和top 是position 的属性。针对的也不是父类的容器。在这里position:absolute.官方给出的解释为：相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。 这么说就很含蓄了。我说不清楚，建议去看看 深入理解系列 张鑫旭讲还是不错的
-
- JoKer49
- 2017-04-24 16:56:22
position:absolute;
top:50%;
left:50%;
这几行的作用是div的左上角成为body的中央；
transform:translate( -50%, -50%);
这行的作用是向左，向上 平移自身宽度，高度的百分之50。这也达到了自身div的中心点和div中心点重合的作用。
-
- 交替的黑白键
- 2016-04-23 13:49:43
translate是针对元素本身，left和top是针对其父元素；
这几行代码先让.wrapper的最左边移动到其父元素的中间，然后再向左移动自身宽度的一半，这样就达到了居中的效果了
十天精通CSS3
242213 学习 · 2623 问题
相似问题