Translate X and Y percentage values based on elements height and width?

Question

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?

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

Answer 1

When using percentage in a transform translate on a non-SVG element, it refers to the width or height of itself. Take a look at 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).

On an SVG element, a transform percentage refers to the size of the parent instead!

Here is a pen:

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>

Strange, huh?

Answer 2

You can use vw and vh to translate based on the viewport size

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

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

Answer 3

What works for me using only CSS is:

.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 the parent (this is not what we want at this point).
• translate moves child widget -50% up and left based on its size (not the parent). It means, widget's center point moves exactly where top-left point was (previously set up as center of a parent) - and this is what we want.

Answer 4

In browsers where it's supported, you can now use container units to translate an element by a percentage of the parent width/height.

First set the container-type property of the parent to "size". This enables children to query the parent dimensions.

.parent { container-type: size }

Next translate the child element with cqh (container query height) units. 1cqh equals 1% of the parent height.

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

Answer 5

To use percentage in the translate property, you have to use Javascript : http://jsfiddle.net/4wqEm/27/

HTML code :

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

CSS code :

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

Javascript code :

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.

Answer 6

You can also use one extra block and use the transition for it except the child node

HTML code :

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

css should be something like this

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

Answer 7

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):

js fiddle pen here

 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

Its forked with positioning required on the following URL working sample

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 :

1. you can absolute positioning of your red square by changing parent element to position relative
2. then using 50% top and 50% left will position red square according to its upper left corner
3. using transform:translate(-50%,-50%) will position red square according to its center

Answer 9

You can make the element absolute positioned and use left and top property to take the percentage value as parent.

Answer 10

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