CSS 그리드 레이아웃 중앙 정렬 완벽 가이드

소개

이 랩에서는 CSS 를 사용하여 그리드 중앙 정렬 (grid centering) 의 개념을 탐구합니다. grid 레이아웃을 사용하여 부모 요소 내에서 자식 요소를 수평 및 수직으로 중앙 정렬하는 방법을 배우게 됩니다. 이 랩을 마치면 justify-content 및 align-items 속성을 사용하여 완벽하게 중앙 정렬된 레이아웃을 만드는 방법에 대한 확실한 이해를 갖게 될 것입니다.

이것은 가이드 실험입니다. 학습과 실습을 돕기 위한 단계별 지침을 제공합니다.각 단계를 완료하고 실무 경험을 쌓기 위해 지침을 주의 깊게 따르세요. 과거 데이터에 따르면, 이것은 초급 레벨의 실험이며 완료율은 100%입니다.학습자들로부터 100%의 긍정적인 리뷰율을 받았습니다.

그리드 중앙 정렬 (Grid Centering)

index.html 및 style.css는 이미 VM 에 제공되어 있습니다.

부모 요소 내에서 자식 요소를 수평 및 수직으로 모두 중앙 정렬하려면 다음 단계를 따르세요.

display: grid를 사용하여 그리드 레이아웃을 생성합니다.
justify-content: center를 사용하여 자식을 수평으로 중앙 정렬합니다.
align-items: center를 사용하여 자식을 수직으로 중앙 정렬합니다.

다음은 HTML 구조의 예입니다.

<div class="parent">
  <div class="child">Centered content.</div>
</div>

그리고 해당 CSS 는 다음과 같습니다.

.parent {
  display: grid;
  justify-content: center;
  align-items: center;
  height: 100px;
}

오른쪽 하단 모서리에 있는 'Go Live'를 클릭하여 포트 8080 에서 웹 서비스를 실행하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.

요약

축하합니다! 그리드 중앙 정렬 랩을 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.

CSS 그리드 레이아웃 중앙 정렬 마스터

소개

그리드 중앙 정렬 (Grid Centering)

요약