LabEx
로그인무료 가입

요소 수직 및 수평 중앙 정렬

Beginner

This tutorial is from open-source community. Access the source code

소개

이 랩에서는 CSS 변환 (transform) 을 사용하여 부모 요소 내에서 자식 요소를 수직 및 수평으로 중앙 정렬하는 방법을 배우겠습니다. 상대 위치 지정 (relative positioning) 과 절대 위치 지정 (absolute positioning) 을 사용하고, transform 속성과 해당 translate 함수를 활용하여 이를 수행할 것입니다. 이 랩은 웹 페이지에서 콘텐츠를 배치하는 데 유용한 기술을 제공할 것입니다.

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

변환 (Transform) 을 이용한 중앙 정렬

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

CSS 변환을 사용하여 자식 요소를 부모 요소 내에서 수직 및 수평으로 중앙 정렬하려면 다음 단계를 따르세요.

  1. 부모 요소의 position 속성을 relative로 설정하고 자식 요소의 position 속성을 absolute로 설정하여 부모를 기준으로 위치를 지정합니다.
  2. left: 50% 및 top: 50%을 사용하여 자식 요소를 부모 요소의 왼쪽 및 상단 가장자리에서 50% 만큼 오프셋합니다.
  3. transform: translate(-50%, -50%)을 사용하여 위치를 상쇄 (negate) 하여 수직 및 수평으로 모두 중앙 정렬되도록 합니다.
  4. 부모 요소의 고정된 height와 width는 시연 목적으로만 사용됩니다.

다음은 HTML 코드 예시입니다.

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

다음은 해당 CSS 코드입니다.

.parent {
  border: 1px solid #9c27b0;
  height: 250px;
  position: relative;
  width: 250px;
}

.child {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

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

요약

축하합니다! 변환 (Transform) 을 이용한 중앙 정렬 랩을 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.