top과 translate
.box{ position: absolute; top: 50%; left:50%; transform: translate(-50%,-50%); } 위쪽과 왼쪽이 적용되면 상자는 왼쪽 상단 모서리를 기준으로 중앙에 배치됩니다 ==> 중앙은 왼쪽 상단 모서리에 닿습니다. 변환을 추가할 때 요소 너비 및 높이 값의 -50% 이동
.box{ position: absolute; top: 50%; left:50%; transform: translate(-50%,-50%); } 위쪽과 왼쪽이 적용되면 상자는 왼쪽 상단 모서리를 기준으로 중앙에 배치됩니다 ==> 중앙은 왼쪽 상단 모서리에 닿습니다. 변환을 추가할 때 요소 너비 및 높이 값의 -50% 이동