top과 translate

.box{
    position: absolute;
    top: 50%;
    left:50%;
    transform: translate(-50%,-50%);
  }

위쪽과 왼쪽이 적용되면 상자는 왼쪽 상단 모서리를 기준으로 중앙에 배치됩니다 ==> 중앙은 왼쪽 상단 모서리에 닿습니다.

변환을 추가할 때 요소 너비 및 높이 값의 -50% 이동