My HTML and body have a height of 100vh.
Inside my body, I have a square that is 100px by 100px.
When I apply top: 50% to the div, it moves down 50%. But when I apply translateY(50%) to the div, it does not move down 50%. Why is this?
Please note that you need to open the HTML in a full page view to see that the div does not move down by 50%.
* {
padding: 0;
margin: 0;
}
html, body {
height: 100vh;
width: 100vw;
}
body {
position: relative;
background-color: black;
}
div {
height: 100px;
width: 100px;
background-color: orange;
position: absolute;
/* top: 50%; */
transform: translateY(50%);
}<div></div>