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).
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):
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.
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%;
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;
}