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

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

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

인라인 구조를 가운데 정렬하는 방법

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

블록요소를 가운데 정렬하는 방법

See the Pen dwqNNL by HyeInLee (@leehye1204) on CodePen.

테이블을 이용한 가운데 정렬하는 방법

See the Pen Center type3 by HyeInLee (@leehye1204) on CodePen.

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

See the Pen Center type4 by HyeInLee (@leehye1204) on CodePen.

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

See the Pen Center type5 by HyeInLee (@leehye1204) on CodePen.

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

See the Pen Center type6 by HyeInLee (@leehye1204) on CodePen.

플렉스를 이용한 가운데 정렬하는 방법

See the Pen BvOpOp by HyeInLee (@leehye1204) on CodePen.