为了账号安全,请及时绑定邮箱和手机立即绑定

关于translate(x,y)及居中问题

  1. 当translate(x,y)中的x,y都为百分比的时候是依照什么作为参考?是不是自身大小的百分比?

  2. 关于居中问题

代码如下:

  1. <!DOCTYPE html>

  2. <html>

  3. <head> 

  4. <meta charset="utf-8">

  5. <title>变形与动画</title>

  6. <link href="style.css" rel="stylesheet" type="text/css">

  7. <style>

  8. .wrapper {

  9.   padding: 20px;

  10.   background:orange;

  11.   color:#fff;

  12.   position:absolute;

  13.   top:50%;

  14.   left:50%;  /*求教这 几行代码对于居中有何影响及其具体作用?*/

  15.   border-radius: 5px;

  16.   -webkit-transform:translate(-50%, -50%);

  17.   -moz-transform:translate(-50%, -50%);

  18.   transform:translate( -50%, -50%);

  19. }</style>

  20. </head> 

  21. <body>

  22. <div class="wrapper">

  23. 我不知道我的宽度和高是多少,我要实现水平垂直居中    

  24. </div>

  25. </body>

  26. </html>

    请指教,非常感谢!

正在回答

3 回答

纠正一下楼上的。left和top 是position 的属性。针对的也不是父类的容器。在这里position:absolute.官方给出的解释为:相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块。 这么说就很含蓄了。我说不清楚,建议去看看  深入理解系列    张鑫旭讲还是不错的

0 回复 有任何疑惑可以回复我~
#1

闹钟___你别闹 提问者

非常感谢!谢谢
2016-07-22 回复 有任何疑惑可以回复我~

  position:absolute;

  top:50%;

  left:50%;

 这几行的作用是div的左上角成为body的中央;

  transform:translate( -50%, -50%);

这行的作用是向左,向上 平移自身宽度,高度的百分之50。这也达到了自身div的中心点和div中心点重合的作用。

2 回复 有任何疑惑可以回复我~

translate是针对元素本身,left和top是针对其父元素;

这几行代码先让.wrapper的最左边移动到其父元素的中间,然后再向左移动自身宽度的一半,这样就达到了居中的效果了

12 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

关于translate(x,y)及居中问题

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信