콘텐츠를 자르지 않고 DIV를 수평 및 수직 중앙에 어떻게 배치할 수 있습니까?

DIV를 가로 및 세로로 중앙에 배치

DIV를 세로 및 가로로 가운데 배치하는 것은 다양한 방법을 사용하여 수행할 수 있지만 콘텐츠 오버플로가 허용되지 않는 경우 어려워집니다. 일반적인 접근 방식 중 하나는 음수 여백을 사용하는 절대 위치 지정을 사용하는 것이었지만 이로 인해 창 크기가 콘텐츠보다 작을 때 콘텐츠가 잘릴 수 있습니다.

최신 브라우저를 위한 솔루션

최신 지원 기능을 갖춘 웹 브라우저의 경우 Flexbox는 보다 안정적이고 효율적인 기능을 제공합니다. 솔루션입니다.

HTML:

<div class="content">This works with any content</div>

CSS:

.content {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

이 접근 방식은 절대 위치 지정 및 CSS 변환을 사용합니다. 콘텐츠 자체에 영향을 주지 않고 콘텐츠를 뷰포트 중앙으로 이동합니다. 이렇게 하면 창 크기에 관계없이 전체 콘텐츠가 계속 표시됩니다.

이전 브라우저에 대한 고려 사항

이전 브라우저에 대한 지원이 필요한 경우 테이블 사용과 같은 대체 솔루션이 필요할 수 있습니다. 동일한 높이 열을 사용한 부동 위치 지정 또는 브라우저 간 지원을 위한 JS 라이브러리. 그러나 이러한 방법에는 한계가 있을 수 있으며 모든 시나리오에 항상 이상적인 것은 아닙니다.

위 내용은 콘텐츠를 자르지 않고 DIV를 수평 및 수직 중앙에 어떻게 배치할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!