Modal 중앙 정렬 하는 법

모달 창 중앙에 맞추기

문제

• 아래 css를 이용하여 중앙 배치를 하였는데 모달이 중앙 살짝 우측으로 배치되지 않는 문제가 있다.

  position: fixed;
  top: 50%;
  left: 50%;

원인

• 50%로 고정되는 위치가 모달에 중앙이 아닌 좌측최상단이기때문에 발생하는 에러이다.

 

해결법

• translate 를 이용하여서 모달 중앙으로 위치를 맞춰준다

  transform: translate(-50%, -50%);

추가내용

-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);

• 브라우저마다 지원이 다르기 때문에, 브라우저별 transform을 모두 써주면 더욱 완벽하다.
• transform을 IE9은 이걸 지원하기 않기에 적용이 되지 않는다.(아마 쓰는 사람도 거의 안 남았겠지만...)