[css] position 중앙정렬 하기

css에서 position값을 이용할 때 중앙 정렬할 때 사용!
가로 세로 모두 중앙 정렬된다

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

✅css
1) 포지션 속성을 입력한다
2) top 50%를 설정해준다
3) left 50%를 설정해준다
4) transform을 이용해서 translate의 x축 y축 값을 지정한다
5) IE에서도 적용시키기 위해 -ms-추가하여 transform을 한번 더 작성해준다

✔️ position은 좌상단을 기준점으로 이동한다
✔️ transform에 -를 넣는 이유는 내려온 만큼의 반을 다시 올라가고 오른쪽 이동만큼의 반을 다시 왼쪽으로 이동하게 하여 중앙에 맞추기 위해!