这个问题的解决方案是根本不要使用translate。当你平移一个元素时，你选择的百分比是基于它自己的高度。
如果要根据父元素的高度定位元素，请使用top：百分之五十;
代码如下所示：

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

当在***non-SVG元素***上的transform translate中使用percentage时，它指的是自身的宽度或高度。
CSS转换的一个有趣之处在于，当使用百分比值应用它们时，它们会将该值基于实现它们的元素的维度，而不是像top、right、bottom、left、margin和padding这样的属性，这些属性只使用父元素的维度（或者在绝对定位的情况下，使用其最近的相对父元素）。
在***SVG元素***上，转换百分比是指父元素的大小!
这里有一支笔：
https://codepen.io/trusktr/pen/gOdwWXv

svg, [outer] {
  border: 1px solid black;
}

rect {
  transform: translate3d(50%, 50%, 0);
}

[inner] {
  background: black;
  transform: translate3d(50%, 50%, 0);
}

<svg width="100" height="80">
    <rect width="20" height="20" />
</svg>

<div outer style="width: 100px; height: 80px;">
    <div inner style="width: 20px; height: 20px;"></div>
</div>

很奇怪吧？

可以使用vw和vh根据视口大小进行平移

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

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

我使用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%的顶部和左侧的基础上，其大小（而不是父）。这意味着，小部件的中心点将被移动到左上角点-这以前是设置为中心的父，这是我们想要的。

要在translate属性中使用percentage，必须使用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)";​​​​​​​​​​​​​​​​​​​​​​​​​​

我希望我能帮助你，如果你有任何其他的问题，请告诉我。

您的陈述是绝对正确的百分比来自非常翻译的元素。而不是使用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%;
    }

您还可以使用一个额外的块，并将变换用于该块（子节点除外
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;
}

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

它在以下URL working sample上分叉，需要定位

body {
margin: 0;
width: 100%;
height: 100%;
}

body>div {
position: relative;
width: 200px;
height: 200px;
background: #ff0;
}

body>div>div {
position: absolute;
left: 50%;
top: 50%;
width: 10%;
height: 10%;
background: #f00;
transform: translate(-50%, -50%);
}

注：
1.通过将父元素更改为相对位置，可以绝对定位红色方块
1.然后使用50%顶部和50%左侧将根据其左上角定位红色正方形
1.使用变换：translate（-50%，-50%）将根据其中心定位红色正方形