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

Question

将元素 Y 轴平移 50% 会将其向下移动 50% 的自身高度，而不是我期望的父级高度的 50%。如何告诉翻译元素将其翻译百分比基于父元素？还是我不明白什么？

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

Answer 1

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

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

Answer 2

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

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

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

Answer 3

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

Answer 4

要在翻译属性中使用百分比，您必须使用 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 5

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

您也可以使用一个额外的块并为其使用除子节点之外的过渡

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 7

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

Answer 8

它的分叉需要在以下 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. 您可以通过将父元素更改为相对位置来对红色方块进行绝对定位
2. 然后使用 50% 顶部和 50% 左侧将根据其左上角定位红色方块
3. 使用 transform:translate(-50%,-50%) 将根据中心定位红色方块

Answer 9

解决这个问题的方法是根本不使用翻译。当你翻译一个元素时，你选择的百分比是基于它自己的高度。

如果要根据父元素的高度来定位元素，使用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;
}