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

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

• 인라인 구조를 가운데 정렬하는 방법 (text-align : center;)
• 블록 요소를 가운데 정렬하는 방법(margin: 0 auto;)
• 테이블을 이용한 가운데 정렬하는 방법(기본적인 방법 : display: table-cell; ,vertical-align: middle;)
• 포지션을 이용한 가운데 정렬하는 방법 1 (margin)
• 포지션을 이용한 가운데 정렬하는 방법 2 (transform: translate(-50%, -50%);)
• 포지션을 이용한 가운데 정렬하는 방법 3 (margin:auto; , left: 0; top: 0; right: 0; bottom: 0;)
• 포지션을 이용한 가운데 정렬하는 방법 4 ( displat: flex;)

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

See the Pen Center Type1 by jeongahlee (@jeongahlee) on CodePen.

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

See the Pen Center Type2 by jeongahlee (@jeongahlee) on CodePen.

테이블을 이용한 가운데 정렬하는 방법(기본적인 방법 :display: table-cell;,vertical-align: middle;)

See the Pen Center Type3 by jeongahlee (@jeongahlee) on CodePen.

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

See the Pen Center Type4 by jeongahlee (@jeongahlee) on CodePen.

포지션을 이용한 가운데 정렬하는 방법 2 (transform: translate(-50%, -50%);)

See the Pen Center Type5 by jeongahlee (@jeongahlee) on CodePen.

포지션을 이용한 가운데 정렬하는 방법 3 (margin: auto; left: 0; top: 0; right: 0; bottom: 0;)

See the Pen Center Type6 by jeongahlee (@jeongahlee) on CodePen.

포지션을 이용한 가운데 정렬하는 방법 4 (displat: flex; )

See the Pen Center Type7 by jeongahlee (@jeongahlee) on CodePen.

image 출처 : dribble