콘텐츠를 보존하면서 Div를 수평 및 수직으로 완벽하게 중앙에 배치하는 방법은 무엇입니까?

콘텐츠 보존을 통한 수평 및 수직 Div 중앙 정렬

웹 개발 영역에서는 div를 수평 및 수직 중앙에 배치해야 하는 경우가 종종 있습니다. 수직으로. 절대 위치 지정 및 음수 여백과 같은 기존 방법을 사용하면 이를 달성할 수 있지만 div가 완전히 표시되지 않을 때 콘텐츠가 잘리는 경우가 많습니다. 이 기사에서는 창 크기에 관계없이 콘텐츠가 항상 표시되도록 하는 솔루션을 제시합니다.

최신 브라우저 솔루션: Flexbox

최신 브라우저의 경우 Flexbox는 우아한 솔루션을 제공합니다. 이 문제에. Flexbox를 사용하면 상위 컨테이너를 flex로 설정하고 하위 div를 margin: auto로 설정하여 콘텐츠를 중앙에 배치할 수 있습니다.

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

.parent {
  display: flex;
}

.child {
  margin: auto;
}

이전 브라우저 지원

Flexbox를 지원하지 않는 브라우저의 경우 CSS 변환을 사용할 수 있습니다. div를 위치: 절대, 왼쪽: 50%, 위쪽: 50%로 설정한 다음 번역 변환(-50%, -50%)을 적용하면 div가 중앙에 배치됩니다.

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

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

Flexbox 또는 CSS 변환을 사용하면 div를 가로와 세로 모두 중앙에 배치하여 창 크기에 관계없이 콘텐츠가 항상 표시되도록 할 수 있습니다.

위 내용은 콘텐츠를 보존하면서 Div를 수평 및 수직으로 완벽하게 중앙에 배치하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!