CSS를 사용하여 종횡비를 유지하고 Div를 중앙에 배치하는 방법은 무엇입니까?

폭과 높이에 따른 종횡비 유지

div의 종횡비를 유지하는 것은 반응형 디자인에 필수적입니다. 이렇게 하면 크기나 방향에 관계없이 요소의 비율이 일관되게 유지됩니다.

CSS만 사용하여 이를 달성하려면 최신 aspect-ratio 속성을 ​​활용할 수 있습니다.

Aspect -Ratio 속성

aspect-ratio 속성은 요소의 너비와 높이의 비율을 지정합니다. 예를 들어, 1/1 값은 정사각형을 생성하고, 16/9 값은 16:9 디스플레이와 동일한 종횡비의 직사각형을 생성합니다.

가로 및 수직으로 Div 중심 맞추기

요소를 상위 요소 내에서 가로 및 세로로 가운데에 배치하려면 다음 CSS 속성을 사용할 수 있습니다.

margin: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

예제 코드

종횡비와 가운데 맞춤 속성을 결합하여 뷰포트 중앙에 위치하면서 종횡비를 유지하는 정사각형 div:

.ar-1-1 {
  aspect-ratio: 1 / 1;
  margin: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 100vh;
}

이 코드는 1:1 종횡비를 유지하면서 전체 뷰포트를 차지하는 정사각형 div를 생성합니다. div는 뷰포트 내에서 수평 및 수직 중앙에 배치됩니다.

추가 참고 사항

• aspect-ratio 속성은 아직 모든 브라우저에서 지원되지 않지만 최신 브라우저에서는 지원됩니다. Chrome, Firefox, Safari 등이 있습니다.
• 이전 브라우저와의 호환성을 보장하려면 [picturefill](https://github.com/scottjehl/picturefill) 또는 [respond.js](https)와 같은 폴리필을 사용할 수 있습니다. //github.com/scottjehl/Respond).

위 내용은 CSS를 사용하여 종횡비를 유지하고 Div를 중앙에 배치하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!