[CSS] 화면이 확대/축소 되어도 요소를 중앙에 고정 시키는 법

화면을 확대/축소해도 요소의 위치를 고정시키려면, CSS의 position 속성과 transform 속성을 사용하면 된다.

position: fixed;

이 속성은 요소를 화면 상에 고정시켜주는 역할을 한다. 이 속성을 사용하면 요소의 위치가 항상 화면의 같은 위치에 유지된다.

transform: translate();

이 속성은 요소를 이동시키는 역할을 한다. 이 속성을 사용하면 요소의 위치를 x축, y축으로 이동시킬 수 있다.

코드

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

위 코드에서 'position: fixed;'는 요소를 고정시키고, 'top: 50%; left: 50%;'는 요소를 화면 중앙에 위치시킨다. 마지막으로 'transform: translate(-50%, -50%);'는 요소를 화면 중앙으로 이동시킨다.