Modal 창 현재 Html 화면 가운데 위치 시키기

 

.modal_frame {
    position: fixed; # .modal_fram 속성을 가진 요소를 현재 보고있는 창을 기준으로 고정, 스크롤되어도 따라다님
    left: 50%; # 보고 있는 화면 (= 뷰 포트, position이 fixed 이므로) 가로 선 중앙 50%로 이동
    top: 50%; # 보고 있는 화면 세로 선 중앙 50% 이동
    transform: translate(-50%, -50%); # 요소를 수직 및 수평으로 -50% 만큼 이동 > 최종적으로 화면 정 중앙에 위치
}

 

위의 코드를 본 후에 top 50%, left 50% 후 각각 tranfrom -50%을 적용하는 대신

각 수치에 100%, -100%를 적용해도 같은 효과를 보일 것이라고 생각하고, 테스트 해봤다.

 

테스트 해 본 결과는 50%로 적용했을 때와 육안적으로 차이나는 부분은 없어서

Chat GPT로 문의한 결과, 두 코드 모두 모달 창을 화면 중앙으로 이동시키는 효과는 같지만

 

GPT가 추천하는 코드는 50%로 적용하는 것이 더 편하고 안정적인 방법이라고 한다. 그 이유에 대해서 물어보니

 

요소를 이동시키는 css 명령 중 top, bottom 의 경우,  이동에 CPU를 이용하기 때문이라고 하는데,

최종적으로 가운데로 돌아오기 위한 작업의 밑작업이라면  100% 보다는 50%로 적게 이동시키는 것이 좋을 것 같다.

 

질문의 마지막에 항상 50%, 50% -50%를 추천하는 것을 보면

이와 같은 설정에서 가장 보편적으로 사용하는 코드인 것으로 추측된다.