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

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

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

当在变换中使用百分比时，平移非 SVG 元素，它指的是自身的宽度或高度。看一眼https://davidwalsh.name/css-vertical-center https://davidwalsh.name/css-vertical-center (demo https://davidwalsh.name/demo/css-vertical-center.php):

关于 CSS 变换的一个有趣的事情是，当将它们应用于百分比值时，它们会将该值基于所实现的元素的尺寸，而不是像上、右、下、左、边距和填充等属性，仅使用父级的尺寸（或者在绝对定位的情况下，使用其最接近的相对父级）。

On an SVG元素，变换百分比是指父级的大小！

这是一支笔：

https://codepen.io/trusktr/pen/gOdwWXv 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>

奇怪吧？