[CSS] 중앙 정렬 하는 방법

1.position 이용하기

1)
부모쪽에 position: relative;
자식쪽에 position: absolute;
이렇게 해야 부모를 기준으로 자식이 배치된다. position:relative;를 빼면 자식이 브라우저 창 기준으로 위치된다.

2)
자식쪽에 top:0; bottom:0; 등과 같이 어디가 top이고 어디가 bottom인지 지정해줘야 한다.

3)
margin: auto;를 통해 중앙에 위치시킬 수 있다.

See the Pen css중앙정렬1 by sol _ (@sol-_) on CodePen.

2. flex 이용하기

1) 부모쪽에 display: flex; 삽입

display: flex;

2) 부모쪽에서 자식 위치 지정

align-items: center;
justify-content: center;

See the Pen css중앙정렬2 by sol _ (@sol-_) on CodePen.