CSS 根据元素高度和宽度转换 X 和 Y 百分比值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11160227/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Translate X and Y percentage values based on elements height and width?
提问by Andrew Tibbetts
Translating an elements Y axis 50% will move it down 50% of its own height, not 50% of the parents height as I would expect. How do I tell a translating element to base it's translation percentage on the parent element? Or am I not understanding something?
将元素 Y 轴平移 50% 会将其向下移动其自身高度的 50%，而不是我预期的父高度的 50%。如何告诉翻译元素将其翻译百分比基于父元素？还是我不明白什么？
回答by bowen
When using percentage in translate, it refers to width or height of itself. Take a look at https://davidwalsh.name/css-vertical-center(demo):
在翻译中使用百分比时，它指的是自身的宽度或高度。看看https://davidwalsh.name/css-vertical-center( demo)：
One interesting thing about CSS transforms is that, when applying them with percentage values, they base that value on the dimensions of the element which they are being implemented on, as opposed to properties like top, right, bottom, left, margin, and padding, which only use the parent's dimensions (or in case of absolute positioning, which uses its closest relative parent).
关于 CSS 转换的一件有趣的事情是，当使用百分比值应用它们时，它们基于正在实现它们的元素的尺寸，而不是像顶部、右侧、底部、左侧、边距和填充等属性，仅使用父级的尺寸（或者在绝对定位的情况下，使用其最近的相对父级）。
回答by Kokodoko
You can use vw and vh to translate based on the viewport size
您可以使用 vw 和 vh 根据视口大小进行平移
@keyframes bubbleup {
0% {
transform: translateY(100vh);
}
100% {
transform: translateY(0vh);
}
}
回答by zolv
What works for me using only CSSis:
.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%);
}
How it works:
这个怎么运作：
- top and left positioning move child widget according to parent coordinates. Child widget's top-left corner will appear exactly in the center of parent (this is not what we want at this time).
- translation will move child widget -50% to top and left based on its size (not the parent). It means, widget's center point will be moved exactly where top-left point was - which previously was set up as center of a parent, and this is what we want.
- 顶部和左侧定位根据父坐标移动子小部件。子小部件的左上角将恰好出现在父小部件的中心（这不是我们此时想要的）。
- 翻译将根据其大小（而不是父级）将子小部件 -50% 移动到顶部和左侧。这意味着，小部件的中心点将精确移动到左上点所在的位置 - 以前设置为父级的中心，这就是我们想要的。
回答by Lucas Willems
To use percentage in the translate property, you have to use Javascript : http://jsfiddle.net/4wqEm/27/
要在翻译属性中使用百分比，您必须使用 Javascript：http: //jsfiddle.net/4wqEm/27/
HTML code :
HTML代码：
<div id="parent">
<div id="children"></div>
</div>?????????????
CSS code :
CSS 代码：
#parent {
width: 200px;
height: 200px;
background: #ff0;
}
#children {
width: 10%;
height: 10%;
background: #f00;
}
Javascript code :
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)";??????????????????????????
I hope I could help you and say me if you have any other problem.
我希望我能帮助你，如果你有任何其他问题，请告诉我。
回答by iulial
Your statement is absolutely right about the percentages coming from the very translated element. Instead of using translate property in your case you should be using absolute positioning to stay relative to the parent div. I absolutely positioned vertically your red div here:(don`t forget about adding position relative to the parent div.It has to be positioned other than static default):
您关于来自非常翻译元素的百分比的说法是绝对正确的。在您的情况下，您应该使用绝对定位来保持相对于父 div 的位置，而不是使用 translate 属性。我在这里绝对垂直定位你的红色 div:(不要忘记添加相对于父 div 的位置。它必须被定位而不是静态默认值)：
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%;
}
回答by Mhmad Q.Abdelhaq
Its forked with positioning required on the following URL working sample
它的分支与以下 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%);
}
notes :
笔记：
- you can absolute positioning of your red square by changing parent element to position relative
- then using 50% top and 50% left will position red square according to its upper left corner
- using transform:translate(-50%,-50%) will position red square according to its center
- 您可以通过将父元素更改为相对位置来绝对定位您的红色方块
- 然后使用 50% top 和 50% left 将根据其左上角定位红色方块
- 使用 transform:translate(-50%,-50%) 将根据其中心定位红色方块
回答by Petryk P'yatochkin
You can also use one extra block and use the transition for it except the child node
您还可以使用一个额外的块并为其使用过渡，除了子节点
HTML code :
HTML代码：
<div id="parent">
<div id="childrenWrapper">
<div id="children"></div>
</div>
</div>?????????????
css should be something like this
css 应该是这样的
#parent {
position: relative;
width: 200px;
height: 200px;
background: #ff0;
}
#childrenWrapper{
width: 100%;
height: 100%;
}
#children {
width: 10%;
height: 10%;
background: #f00;
}
回答by user4993573
You can make the element absolute positioned and use left and top property to take the percentage value as parent.
您可以使元素绝对定位并使用 left 和 top 属性将百分比值作为父级。
回答by Vlad
The solution to this problem is not to use translate at all. When you are translating an element, the percentage you select is based on it's own height.
这个问题的解决方案是根本不使用翻译。当您翻译一个元素时，您选择的百分比基于它自己的高度。
If you want to position the element based on the parent's height, use top: 50%;
如果要根据父元素的高度定位元素，请使用 top: 50%;
So the code will look like this:
所以代码看起来像这样：
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;
}
