92

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

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

4

9 回答 9

47

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

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

于 2014-01-17T00:28:16.933 回答
30

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

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

  100% {
    transform: translateY(0vh);
  }
}
于 2016-04-13T13:46:24.783 回答
20

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

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

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

于 2012-12-30T13:50:55.600 回答
4

您对来自翻译元素的百分比的陈述是绝对正确的。在您的情况下，您应该使用绝对定位来保持相对于父 div，而不是使用 translate 属性。我在这里绝对垂直放置您的红色 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%;
    }
于 2016-01-05T10:44:30.437 回答
2

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

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;
}
于 2014-10-02T12:10:51.943 回答
1

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

于 2015-06-17T05:06:10.990 回答
1

它在以下 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% top 和 50% left 将根据其左上角定位红色方块
  3. 使用 transform:translate(-50%,-50%) 将根据其中心定位红色方块
于 2018-05-26T13:55:47.877 回答
0

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

如果要根据父元素的高度定位元素，请使用 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;
}
于 2018-05-18T13:50:10.230 回答