[CSS] 화면 가운데 정렬 / 화면 가운데 팝업 / animation 적용 시 가운데 정렬 유지

화면 전체 기준으로 가운데 정렬을 하는 일이 종종 있다.

 

보통 fixed를 사용한 가운데 정렬은 

 

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

위와 같이 설정을 하여 처리를 했었었다.

 

기본적인 부분에서는 문제가 되지 않지만

animation과 함께 사용 시 뜻하지 않는 대로 움직일 때가 있다.

 

찾아보니 { position: fixed; margin: 0 auto;  left: 0;  right: 0; } 이런식으로 가운데 정렬을 하는 방법도 있다

 

[문제상황]

<style>
  .popup-container {
  }
  .popup {
    position: fixed;
    top: 50%;
    left: 50%;
    background-color: tomato;
    transform: translate(-50%, -50%);
    animation: ani 0.5s ease-in-out;
  }
  @keyframes ani {
    0% {
      transform: scale(0.8);
    }
    100% {
      transform: scale(1);
    }
  }
</style>

<div class="popup-container">
  <div class="popup">
    <p>팝업내용</p>
  </div>
</div>

scale이 변경될때 위치가 애매하게 적용되고,

점프되어서 원래 위치로 돌아가는 현상이 발생한다.

transform의 translate이 변경된 크기를 자동으로 잡아주지 못하는 것으로 예상된다.

 

 

[해결방법] 부모요소에 fixed, flex사용

.popup-container {
  position: fixed;
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.popup {
  position: relative;
  top: 0;
  left: 0;
  background-color: tomato;
  animation: ani 0.5s ease-in-out;
}

부모요소에 fixed와 flex를 사용해서 설정해주면

안정적으로 원하는 결과를 얻을 수 있다.