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

Question

翻译元素Y轴50%会将其向下移动50%的高度,而不是父母身高的50%,正如我所料.如何告诉翻译元素将其转换百分比基于父元素？或者我不明白什么？

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

Answer 1

在translate中使用百分比时,它指的是自身的宽度或高度.看看https://davidwalsh.name/css-vertical-center(演示):

关于CSS变换的一个有趣的事情是,当使用百分比值应用它们时,它们将该值基于它们正在实现的元素的维度,而不是像top,right,bottom,left,margin和padding这样的属性. ,仅使用父级的维度(或者在绝对定位的情况下,使用其最接近的相对父级).

Answer 2

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

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

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

Answer 3

仅使用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%移动到顶部和左侧.这意味着,小部件的中心点将被精确地移动到左上角的位置 - 之前被设置为父级的中心,这就是我们想要的.

Answer 4

在支持它的浏览器中，您现在可以使用容器单位将元素平移父宽度/高度的百分比。

首先将父级的容器类型属性设置为“size”。这使子级能够查询父级维度。

.parent { container-type: size }

接下来使用 cqh（容器查询高度）单位平移子元素。1cqh 等于父级高度的 1%。

/* shift child down by 50% of parent height */
.child { transform: translateY(50cqh) }

Answer 5

要在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)";??????????????????????????

我希望如果你有任何其他问题,我可以帮助你并告诉我.