top: 50%; left: 50%; /* positon 중앙 위치 */
margin-left: -100px; margin-top: -50px;
/* 요소의 크기가 200x100 이라고 가정.
height=100px의 반 width=200px의 반 */
top: 0; right: 0; bottom: 0; left: 0; margin: auto;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
와 덕분에 문제가 해결됐어요