백분율 높이를 사용하여 CSS에서 안정적인 수직 정렬을 달성하는 방법은 무엇입니까?

상위 컨테이너 높이의 백분율을 사용한 CSS의 수직 정렬

CSS에서 수직 정렬을 달성하기 위해 다음 접근 방식을 사용했습니다. :

.base {
  background-color: green;
  width: 200px;
  height: 200px;
  overflow: auto;
  position: relative;
}

.vert-align {
  padding-top: 50%;
  height: 50%;
}

처음에는 이 접근 방식이 유망했지만 .base의 너비를 조정할 때 문제가 있는 것으로 나타났습니다. div로 인해 수직 정렬이 중단됩니다. 이 동작은 padding-top이 예상대로 높이가 아닌 너비의 백분율로 계산된다는 사실에서 비롯됩니다.

해결책: 수직 속성 사용

해결 방법 이 문제에서는 padding-top 대신 수직 CSS 속성을 활용할 수 있습니다. 이러한 속성은 상위 요소의 높이를 기준으로 정의됩니다.

.base {
  background-color: green;
  width: 200px;
  height: 200px;
  overflow: auto;
  position: relative;
}

.vert-align {
  top: 50%;
  position: absolute;
}

상단을 50%로 설정하면 내부 .vert-align div를 .base 컨테이너 내에서 수직으로 중앙에 효과적으로 배치할 수 있습니다. 이 접근 방식을 사용하면 .base의 너비에 관계없이 수직 정렬이 그대로 유지됩니다. 이것이 올바르게 작동하려면 내부 div의 위치를 ​​절대값으로 설정하는 것을 잊지 마세요.

위 내용은 백분율 높이를 사용하여 CSS에서 안정적인 수직 정렬을 달성하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!