[CSS] div 정렬하기, div 가운데 정렬하기

[CSS] div 정렬하기, div 가운데 정렬하기

대표적인 block 요소인 div 태그를 정렬해보자. (div안에 있는 div 요소를 정렬하는 것)

제가 봐도 글을 너무 못 적어서 그냥 코드만 보는 것을 추천드립니다.

HTML 구조

해당 게시글에서 사용하는 HTML 마크업 구조는 아래와 같다.

<div>
    <div>
    </div>
</div>

좌측 정렬, 가운데 정렬, 우측 정렬

해당 정렬 방법은 너무 간단하다. 그냥 기본적인 margin 속성만 사용하여도 충분히 할 수 있다.

- 좌측 정렬

좌측 정렬의 경우, 마크업을 하면 기본이 좌측부터 그려지기 때문에 어떠한 값을 주지 않아도 된다.

- 가운데 정렬

가운데 정렬도 어렵지 않다. 안에 있는 div 요소에게 margin: 0 auto 값만 주면 된다.

- 우측 정렬

우측 정렬도 어렵지 않다. 안에 있는 div 요소에게 margin: 0 0 0 auto 값만 주면 된다.

사실 위 방식들은 margin 이라는 속성을 잘 이해하면 쉽게 응용할 수 있는 문제이다. 아마 이 게시글을 보러온 사람들은 위에서 나타낸 정렬이 아니라 정 가운데 정렬이 궁금하여 방문하였을 것이다. 정 가운데 정렬을 알아보자.

정 가운데 정렬

div 정 가운데로 정렬하는 방법도 여러가지가 있다. 여기서는 간단하게 3가지 방법을 알아보자. 사실 1, 2번(아래 코드 확인)은 동일한 방식이라고 볼 수 있고 3번은 필자가 가장 많이 사용하는 display: flex 라는 값을 이용하여 하는 방법이다.

- top, left 속성 이용하기

부모 div에 position: relative, 자식 div에 position: absolute 값을 주었다. 이 후 top, left로 50%씩 이동 후 다시 가운데로 맞춰주기 위해 왼쪽 오른쪽으로 움직인 방법이다. (그냥 코드 보자 ...)

- display: flex 이용하기

display 속성에는 flex 값을 줄 수 있다. 그리고 justify-content: center, align-items: center 값을 주게 되면 자식 div는 부모 기준으로 정 가운데로 이동하게 된다. 필자는 이 방법을 많이 사용한다.

코드

위 글로만 봐서는 이해가 전혀 안될 수도 있다. 너무 흠 ... 내가 봐도 이해가 잘 안된다. 그러나 코드를 보고 난 후 다시 보면 어느 정도 이해가 갈 수 있을 것이다.

See the Pen div 정렬하기 - 1 by Codiving (@codiving) on CodePen.

정리

그냥 display: flex 사용하자. 그리고 다음 게시글에서는 display: flex를 사용하여 9가지 위치 모두 정렬하는 코드를 작성해보자.

마지막

해당 내용은 틀릴 수도 있다는 것을 감안하여 봐주세요. 틀린 내용 및 오탈자 수정 요청 환영입니다. (설명 너무 못 해서 죄송합니다...)