CSS에서 중앙 위아래로 정렬하는 방법

CSS는 웹 디자인에 사용되는 언어로 웹 페이지의 레이아웃과 스타일에 널리 사용됩니다. 웹 디자인에서 매우 일반적인 문제는 상하 중앙 레이아웃을 구현하는 방법입니다. 이 글에서는 위쪽과 아래쪽을 중앙에 맞추는 효과를 쉽게 얻을 수 있는 CSS의 여러 가지 방법을 소개합니다.

방법 1: display:flex 사용

display:flex는 다양하고 복잡한 레이아웃 효과를 빠르게 얻을 수 있는 CSS3의 새로운 레이아웃 방법입니다. 상단과 하단을 중앙에 배치하는 효과를 얻는 데에도 사용할 수 있습니다.

HTML 코드:

<div class="parent">
  <div class="child">
    这是一段文字。
  </div>
</div>

CSS 코드:

.parent {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 400px;
}

.child {
  text-align: center;
}

방법 분석:

display:flex를 사용하여 상단 및 하단 중앙 정렬을 구현합니다. 먼저 상위 요소를 flex 레이아웃으로 설정한 다음 justify-content를 설정해야 합니다. center 및 align-items: center 속성은 각각 수평 및 수직 센터링 효과를 달성합니다.

위 코드에서 상위 요소의 높이는 400px로 설정되어 있으며 필요에 따라 조정할 수 있습니다. 하위 요소의 text-align:center 속성은 텍스트 내용을 가로 중앙에 배치할 수 있습니다.

방법 2: position:absolute 사용

position:absolute를 사용하면 위쪽과 아래쪽을 중앙에 맞추는 효과를 얻을 수도 있습니다. 그러나 이 방법은 요소의 margin-top 및 margin-bottom 속성을 설정해야 하기 때문에 높이가 알려진 요소에 적합하다는 점에 유의해야 합니다.

HTML 코드:

<div class="parent">
  <div class="child">
    这是一段文字。
  </div>
</div>

CSS 코드:

.parent {
  position: relative;
  height: 400px;
}

.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

방법 분석:

상단 및 하단 중앙 정렬을 달성하려면 위치:절대를 사용하세요. 먼저 상위 요소를 위치:상대로 설정한 다음 위치 속성을 설정해야 합니다. 자식 요소를 절대값으로 지정합니다. 이렇게 하면 부모 요소를 기준으로 자식 요소의 위치를 ​​지정할 수 있습니다. 다음으로 top:50%를 사용하여 하위 요소의 위쪽 가장자리를 상위 요소의 가운데로 이동합니다. 그러나 변환에서 여전히 하위 요소의 위치를 ​​조정해야 합니다. 이를 달성하기 위한 속성입니다. 요소는 높이의 50%만큼 위쪽으로 이동되어 위아래로 중앙에 배치되는 효과를 얻습니다.

위 코드에서 상위 요소의 높이는 데모용으로만 400px로 설정되어 있으므로 실제 적용에서는 실제 상황에 따라 조정해야 합니다.

방법 3: 테이블 셀 사용

CSS에서 테이블 셀은 자주 사용되지는 않지만 보다 정확한 레이아웃을 얻을 수 있는 테이블 셀 레이아웃 방법입니다.

HTML 코드:

<div class="parent">
  <div class="child">
    这是一段文字。
  </div>
</div>

CSS 코드:

.parent {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  height: 400px;
}

.child {
  display: inline-block;
  vertical-align: middle;
}

방법 분석:

상단 및 하단 중앙 정렬을 구현하려면 table-cell을 사용하세요. 상위 요소의 표시 속성을 table-cell로 설정하고 text-를 설정해야 합니다. align:center 및 Vertical -align:middle 속성은 각각 수평 및 수직 센터링 효과를 얻습니다. 상위 요소의 높이를 설정해야 합니다. 그렇지 않으면 위쪽 및 아래쪽 중앙에 맞출 수 없습니다.

하위 요소의 표시 속성은 inline-block으로 설정해야 하며, 수직 정렬:중간 속성도 하위 요소가 상위 요소를 기준으로 수직 중앙에 위치하도록 설정해야 합니다. 이 방법의 장점은 보다 정확한 레이아웃을 얻을 수 있고 높이가 알려진 다양한 요소에 적합하다는 것입니다.

결론적으로 상하 센터링 효과를 얻는 방법은 다양하며, 적용되는 상황도 다릅니다. 특정 요구 사항에 따라 적절한 구현 방법을 선택할 수 있습니다.

위 내용은 CSS에서 중앙 위아래로 정렬하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!