CSS 다른 div에 밀리지 않고 맨 위에 나타내기 (position, transform)

프론트 엔드 개발 중 Spinner같이 활성화 되지 않은 상태에서 특정 이벤트 발생 시 화면에 출력을 해야되는 경우가 있다. 그냥 넣어 두면 다른 div가 밀려 부자연스러운 상태가 발생하게 된다.

그때 (position, transform)를 사용하여 밀리지 않고 맨 위에 자연스럽게 나와야 하는 경우 사용한다.

 

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