[CSS] position: absolute 화면 중앙 배치

`position: absolute`인 요소를 화면에 배치하는 방법에 대해서 면접 질문을 받았는데,,, 적절히 대답을 하지 못했다.

프로젝트를 하면서 `display: flex; justify-contents: center; align-item: center`를 주로 사용했기 때문에.

 

질문을 받고 내가 생각한 방법은 아래와 같다.

div {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
}

위 코드의 결과, div의 좌측 상단이 중앙에 위치한다.

 

이 방법에 문제는 좌측 상단이 화면 중앙에 오지 실제 div 태그가 화면 중앙에 위치하지는 않는다.

이를 듣고 다시 생각한 방법은 아래와 같다.

.div {
    position: absolute;
    top: calc(50% - 100px);
    left: calc(50% - 100px);
    width: 100px;
    height: 100px;
}

조금은 중앙으로 온 것 같지만 아직 완전히 중앙에 위치하지 않는다.

 

`calc`를 사용해서 width와 height를 빼주면 화면 중앙에 위치할 것이라고 생각했지만, 이 역시도 제대로 위치하지 않는다.

그리고 이 방법의 문제는 width와 height가 반응형이라면? 그에 대해 적절히 대응하지 못할 것이다.

 

면접관은 두 번째 답변을 듣고 `transform`을 사용해서 배치한다고 말을 해줬다. 그래서 궁금해서 찾아봤다. 어떻게 작성하는지.

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

드디어 화면 중앙에 위치한다.

 

이렇게 작성하면 화면 가운데 정확히 배치할 수 있다.

 

왜 그럴까?

우선, `transform`은 요소에 회전, 크기 조절, 기울이기, 이동 효과 등을 부여할 수 있도록 해준다.

`translate`은 요소의 수평/수직 위치를 조정해준다.

 

`position: absolute; top: 50%; left: 50%`로 요소의 좌측 끝을 화면 중앙에 배치하고

`translate`으로 배치된 요소의 수평/수직 위치를 이동한 %의 마이너스만큼 조정함으로써 가능하다.