레이아웃을 CSS로 가운데 정렬하는 방법

웹페이지 레이아웃을 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와 수평으로 가운데 정렬

최신 flexbox를 사용하여 가운데 정렬할 수도 있습니다. 재산. flexbox 방식으로 인해 속성을 자식 요소로 전달합니다. 레이아웃을 가운데 정렬하는 가장 간단한 방법은 <article>을 래핑하는 것입니다. 다른 요소에 요소를 추가한 다음 flexbox를 추가합니다. 새 상위 요소에 대한 속성입니다.

<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>

그리고 flexbox 속성을 이동합니다(max-width가 아님). ) article { } 새 main { }에 대한 선언 블록 차단:

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

article {
  max-width: 640px;
}

margin: auto와 동일하게 작동합니다. 이전에 본 선언입니다.