When using percentage in translate, it refers to 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).