[CSS] 중앙정렬 하는법

 

1. position: absolute 이용하기

 

부모요소에 relative를 주고 height을 뷰포트 기준으로 잡아준다.

position: relative;
height: 100vh;

 

중앙정렬을 할 요소에 absolute를 주고 transform으로 요소 사이즈만큼 반대로 이동시킨다.

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);