CSS로 웹페이지 레이아웃 가운데 정렬하는 2가지 방법

CSS를 활용해 웹페이지 레이아웃을 가운데 정렬하는 두 가지 방법을 소개합니다.

웹사이트의 아티클(게시글) 레이아웃을 스타일링하면서 <article> 요소를 페이지의 정중앙에 수평으로 가운데 정렬하고 싶다고 가정해 보겠습니다.

가운데 정렬은 몇 가지 방법으로 구현할 수 있습니다. 그중 가장 간단하고 클래식한 방식은 CSS의 margin 속성을 사용해 왼쪽과 오른쪽 값을 auto로 지정하는 것입니다.

무료로 제공되는 CodePen 에디터를 사용하면 직접 따라 하며 연습할 수 있습니다.

먼저 다음은 아티클 레이아웃의 기본적인 HTML 마크업입니다:

<article>
  <h1>Title for your article</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aut
    dignissimos, doloribus accusantium provident nemo a voluptatibus nihil
    recusandae perferendis nesciunt quae illo cum eos dolore esse, architecto
    reprehenderit error.
  </p>
</article>

그리고 다음과 같은 CSS 선언 블록입니다:

article {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

이렇게 작성하면 아티클 레이아웃이 웹페이지의 정중앙에 수평으로 가운데 정렬됩니다.

여기서 max-width 속성이 반드시 필요한 이유는, 이 속성이 없으면 텍스트가 자동으로 페이지의 왼쪽 끝부터 오른쪽 끝까지 꽉 차게 늘어나기 때문입니다.

플렉스박스(Flexbox)로 수평 가운데 정렬하기

최신 CSS 기법인 flexbox를 사용해서도 가운데 정렬을 구현할 수 있습니다. 플렉스박스는 속성을 자식 요소에 전달하는 방식으로 동작하기 때문에, 레이아웃을 가운데 정렬하는 가장 간단한 방법은 <article> 요소를 다른 요소로 감싼 뒤, 그 새로운 부모 요소에 플렉스박스 속성을 추가하는 것입니다.

앞서 만든 아티클 요소를 <main> 요소로 감싸 보겠습니다:

<main>
  <article>
    <h1>Title for your article</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aut
      dignissimos, doloribus accusantium provident nemo a voluptatibus nihil
      recusandae perferendis nesciunt quae illo cum eos dolore esse, architecto
      reprehenderit error.
    </p>
  </article>
</main>

그다음 플렉스박스 속성(max-width는 제외)을 article { } 선언 블록에서 새로운 main { } 블록으로 옮겨 줍니다:

main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

article {
  max-width: 640px;
}

이 방법은 앞서 살펴본 margin: auto 선언과 동일하게 작동합니다. 상황에 맞는 방식을 선택해 깔끔하게 중앙 정렬된 레이아웃을 만들어 보세요.