How top and translate work together to centre a div

I've known for a long time that centring an absolutely positioned div requires writing: top: 50%; left: 50%; translate(-50%, -50%); but until this week I never considered how it works. I found out by accident and it's so obvious once you know. It's ...