根据元素的高度和宽度转换X和Y百分比值？

将元素Y轴平移50％将使它向下移动其自身高度的50％，而不是我期望的父高度的50％。如何告诉翻译元素将其翻译百分比作为父元素的基础？还是我不明白某事？

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

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

关于CSS变换的一件有趣的事情是，当将它们与百分比值一起应用时，它们将基于实现它们的元素的尺寸来确定该值，而不是像top，right，bottom，left，margin和padding这样的属性，仅使用父级的尺寸（或在绝对定位的情况下，使用其最接近的相对父级）。

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

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

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

仅使用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属性中使用百分比，您必须使用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)";​​​​​​​​​​​​​​​​​​​​​​​​​​

希望我能为您提供帮助，如果您有其他任何问题，请告诉我。

您的陈述绝对正确，即来自翻译后的元素所占的百分比。您应该使用绝对定位来保持相对于父div的位置，而不是使用您的情况的translation属性。我绝对在这里垂直放置您的红色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%;
    }

除子节点外，您还可以使用一个额外的块并对其进行过渡

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工作样本上需要进行分叉

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. 您可以通过将父元素更改为相对位置来绝对定位红色方块
2. 然后使用顶部的50％和左侧的50％将根据其左上角放置红色正方形
3. 使用transform：translate（-50％，-50％）将根据其中心放置红色正方形

解决此问题的方法是根本不使用翻译。翻译元素时，选择的百分比基于其自身的高度。

如果要基于父级的高度定位元素，请使用top：50％;

因此，代码将如下所示：

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;
}