CSS] 중앙정렬하는 5가지 방법

5가지 모두 Element 구조는 모두 동일하다.

4,5 번은 구버전 브라우저에서 동작이 제대로 안될 수 있으므로, 체크가 필요하다.

 

1. absolute 사용

See the Pen GRJQmLo by jin (@tomatomat) on CodePen.

 

 

2. margin: 0 auto 사용

See the Pen zYGRzve by jin (@tomatomat) on CodePen.

 

 

3. margin, position 사용

See the Pen NWqyggy by jin (@tomatomat) on CodePen.

 

 

4. translate, position 사용

See the Pen yLNvXzR by jin (@tomatomat) on CodePen.

 

 

5. display: flex 사용

See the Pen xxGYrWb by jin (@tomatomat) on CodePen.