1. 매번 헷갈리는 absolute 중앙 정렬

1. 중앙 정렬하기 with transform

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

2. 중앙 정렬하기 with calc

    position: absolute;

    width: 20rem;

    top: 35%;

    left: calc(50% - 10rem);

 

 =>  top 은 calc(50% - height / 2)

       left 는 calc(50% - width / 2)

* 둘의 차이점 

transform 을 사용하면, 내부의 div 를 건드렸을때, 조금 위치가 변동 될 수 있다.

calc 를 사용하면, 변함이 없다.

 

무슨소리인지는 해보면 안다.

 

나는 calc 로 사용 하는 것이 좋은 것 같다.