CSS: 컨텐츠 요소를 가운데 정렬하는 방법

 

컨텐츠 요소를 가운데 정렬하는 방법

• 인라인 요소를 가운데 정렬하는 방법 (text-align: center)
• 블록 요소를 가운데 정렬하는 방법 (margin: 0 auto)
• 테이블을 이용한 가운데 정렬하는 방법 (vertical-align: middle)
• 포지션을 이용한 가운데 정렬하는 방법 (margin)
• 포지션을 이용한 가운데 정렬하는 방법 (translate)
• 포지션을 이용한 가운데 정렬하는 방법 (margin:auto)
• 플렉스를 이용한 가운데 정렬하는 방법 (display:flex)

인라인 요소를 가운데 정렬하는 방법 (text-align: center)

See the Pen Center Type1 by Jiwon Son (@jiwonson) on CodePen.

블록 요소를 가운데 정렬하는 방법 (margin: 0 auto)

See the Pen Center Type2 by Jiwon Son (@jiwonson) on CodePen.

테이블을 이용한 가운데 정렬하는 방법 (vertical-align: middle)

See the Pen Center Type3 by Jiwon Son (@jiwonson) on CodePen.

포지션을 이용한 가운데 정렬하는 방법 (margin)

See the Pen Center Type4 by Jiwon Son (@jiwonson) on CodePen.

포지션을 이용한 가운데 정렬하는 방법 (translate)

See the Pen Center Type5 by Jiwon Son (@jiwonson) on CodePen.

포지션을 이용한 가운데 정렬하는 방법 (margin:auto)

See the Pen Center Type6 by Jiwon Son (@jiwonson) on CodePen.

플렉스를 이용한 가운데 정렬하는 방법 (display:flex)

See the Pen Center Type7 by Jiwon Son (@jiwonson) on CodePen.