[CSS] padding으로 가운데 정렬 시키기

padding: 0.5rem calc((100vw - 1000px) / 2);

위 식으로 가운데 정렬을 시킬 수 있다.

0.5rem은 위아래 패딩이니 상관없고

핵심은 calc((100vw - 1000px) / 2)이다.

 

calc() CSS함수를 사용하면 CSS 속성의 값으로 계산식을 지정할 수 있다.

 

vw는 vw = viewport width로 현재 실행중인 스크린 크기에 맞춰 상대적 크기를 반환한다.

100vw가 전체 화면의 기준이 된다.

 

따라서 100vw는 전체 화면에서의 width값이고 거기서 1000px만큼을 뺀 값을 2로 나누어 이를 좌우 패딩으로 삼는다는 것이다.

 

이를 정리하면 calc((100vw - (사용할 공간 크기) / 2)로 사용하면 된다.