根据元素高度和宽度翻译X和Y百分比值？

翻译一个元素Y轴50％会将其移动到其自身高度的50％，而不是我所期望的父母高度的50％。 如何告诉翻译元素将它的翻译百分比基于父元素？ 还是我不明白什么？

http://jsfiddle.net/4wqEm/2/

Answer 1

在翻译中使用百分比时，它指的是自身的宽度或高度。 看看https://davidwalsh.name/css-vertical-center（demo ）：

关于CSS转换的一个有趣的事情是，当使用百分比值应用它们时，它们将这个值基于它们实现的元素的维度，而不是像top，right，bottom，left，margin和padding这样的属性，只使用父代的维度（或绝对定位的情况下，使用其最接近的父亲）。

Answer 2

您可以使用vw和vh根据视口大小进行转换

@keyframes bubbleup { 0% { transform: translateY(100vh); } 100% { transform: translateY(0vh); } } 

Answer 3

要在translate属性中使用百分比，您必须使用Javascript： http : //jsfiddle.net/4wqEm/27/

HTML代码：

 <div id="parent"> <div id="children"></div> </div>​​​​​​​​​​​​​ 

CSS代码：

 #parent { width: 200px; height: 200px; background: #ff0; } #children { width: 10%; height: 10%; background: #f00; } 

Javascript代码：

 parent = document.getElementById('parent'); children = document.getElementById('children'); parent_height = parent.clientHeight; ​children_translate = parent_height * 50/100; children.style.webkitTransform = "translateY("+children_translate+"px)";​​​​​​​​​​​​​​​​​​​​​​​​​​ 

如果你有其他问题，我希望我能帮助你。

Answer 4

什么适用于我只使用CSS是：

 .child { position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); /* Backward compatibility */ -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); } 

怎么运行的：

• 顶部和左侧定位根据父坐标移动子部件。 子窗口小部件的左上angular将出现在父项的中心（这不是我们现在想要的）。
• 翻译将根据其大小（不是父级）将子部件-50％移动到顶部和左侧。 这意味着，小部件将完全移到自身的中心。

Answer 5

你的陈述是绝对正确的，从翻译的元素来的百分比。 而不是在你的情况下使用translate属性，你应该使用绝对定位保持相对于父div。 我绝对在这里垂直定位你的红色的div：（不要忘记添加相对于父div的位置，它必须被定位而不是静态的默认值）：

js在这里拨弄笔

  body { margin: 0; width: 100%; height: 100%; } body > div { width: 200px; height: 200px; background: #ff0; position: relative; } body > div > div { width: 10%; height: 10%; -webkit-transform: translateY(-50%); background: #f00; position: absolute; top: 50%; } 

Answer 6

您也可以使用一个额外的块，并使用除了子节点之外的转换

HTML代码：

 <div id="parent"> <div id="childrenWrapper"> <div id="children"></div> </div> </div>​​​​​​​​​​​​​ 

CSS应该是这样的

 #parent { position: relative; width: 200px; height: 200px; background: #ff0; } #childrenWrapper{ width: 100%; height: 100%; } #children { width: 10%; height: 10%; background: #f00; } 

Answer 7

您可以使元素绝对定位，并使用left和top属性将百分比值作为父项。