컨텐츠 요소를 가운데 정렬하는 7가지 방법입니다.

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

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

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

See the Pen Center Type1 by 김지호 (@jiho1010) on CodePen.

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

See the Pen Center Type3 by 김지호 (@jiho1010) on CodePen.

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

See the Pen Center Type2 by 김지호 (@jiho1010) on CodePen.

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

See the Pen Center Type4 by 김지호 (@jiho1010) on CodePen.

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

See the Pen Center Type5 by 김지호 (@jiho1010) on CodePen.

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

See the Pen Center Type6 by 김지호 (@jiho1010) on CodePen.

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

See the Pen Center Type7 by 김지호 (@jiho1010) on CodePen.