position css arrow half way down div

Question

I have a css arrow positioned at the size of my div.

Here is a jsbin that shows it in action.

How can I position the arrow half way down the div no matter what height the div is?

Answer 1

When you use position: absolute you can center things like this:

position: absolute;
top: 50%;
transform: translateY(-50%);

top: 50% assigns 50% of the parent's height to top

transform: translateY(-50%) moves the element up by 50% of the element's height.

This method works regardless of the element's height or the parent's height.

You can also use it to center things horizontally:

position: absolute;
left: 50%;
transform: translateX(-50%);

or both vertically and horizontally:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

http://jsbin.com/lixisidezu/1/edit?html,css,output