根據元素高度和寬度翻譯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％移動到頂部和左側。這意味着，小部件將完全移到其本身的中心。