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

Question

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

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

Answer 1

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

关于 CSS 转换的一个有趣的事情是，当将它们与百分比值一起应用时，它们将该值基于实现它们的元素的维度，而不是像顶部、右侧、底部、左侧、边距和填充这样的属性，它们只使用父级的维度（或者在绝对定位的情况下，使用其最近的相对父级）。

在 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>

很奇怪吧？

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

要在 translate 属性中使用 percent，您必须使用 Javascript ： http://jsfiddle.net/4wqEm/27/

网页代码 ：

<div id="parent">
    <div id="children"></div>
</div>​​​​​​​​​​​​​

CSS代码：

#parent {
    width: 200px;
    height: 200px;
    background: #ff0;
}
#children {
    width: 10%;
    height: 10%;
    background: #f00;
}

脚本代码：

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

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

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

.parent { container-type: size }

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

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

Answer 6

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

网页代码 ：

<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

你关于来自非常翻译元素的百分比的说法是绝对正确的。在您的情况下，您应该使用绝对定位来保持相对于父div 的绝对定位，而不是使用翻译属性。我在这里绝对垂直放置您的红色div：（不要忘记相对于父div.It 添加位置，必须定位而不是静态默认值）：

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

Answer 8

它的分叉，需要在以下 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. 使用变换：翻译（-50%，-50%）将根据其中心定位红色方块

Answer 9

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

Answer 10

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

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