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

Question

翻译元素Y轴50％会将其向下移动50％的高度，而不是我所期望的父母高度的50％。如何告诉翻译元素将其翻译成父元素的百分比？或者我不理解什么？

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

Answer 1

要使用比例在翻译属性，你必须使用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 2

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

有关CSS的一个有趣的事情转化是，用百分比值应用它们时，他们的基地上，他们正在上实现的元件的尺寸是价值，而不是属性如顶部，右侧，底部，左侧，边距和填充，它们只使用父级的尺寸（或者在使用绝对定位的情况下，使用其最近的相对父级）。

Answer 3

你也可以使用一个额外的块，并使用过渡为它除了子节点

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 4

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

Answer 5

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

js fiddle pen here

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

您可以使用大众和VH翻译基础上，视口大小

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

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

Answer 7

我使用only 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%); 
} 

它是如何工作的：

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