CSS : 정중앙으로 오게 하고 싶을때 relative와 absolute 그리고 transform

<div class="parent">
  <div class="child">

  </div>
</div>

 
    .parent {
      position: relative;
      width: 500px;
      height: 500px;
      border: 1px solid red;
      
    }

    .child {
      width: 100px;
      height: 100px;
      border: 1px solid blue;
      position: absolute;
      top:50%;
      left: 50%;
      transform:translate(-50%,-50%)
    }

여기서 중요하게 볼점은

부모요소인 parent 에 Position을 relative를

자식요소인 child 에 Position을 absolute 를

그리고 top : 50%을 하면 top에서 50%만큼 떨어트리게 해줘

left도 동일하게 왼쪽에서 50%떨어트리게 해줘인데

또 주의할점은 이것만으론 정중앙으로 오지 않는다. 

왜냐면 어피치 스티커의 가장자리가 기준이 되기 때문이다.

그래서 사용하는게 transform(변형) : translate (이동) : (-50%,-50% )을 해야 한다.

 

여기서 -50%라 해서 우리가 left  50% 한것처럼 이동하는게 아닌

자식요소의 크기만큼의 50% 을 이동하라 이건데

-50% 은 x축으로 왼쪽에서 오른쪽 이동하는 원리의 반대인

오른쪽에서 왼쪽으로 이동하는 원리를 갖고 있다

 

 

transform : translate ( 좌우이동 , 상하 이동) 이런식으로 작성하면 된다.ㅁ