콘텐츠를 자르지 않고 DIV를 가로 및 세로 가운데에 배치하는 방법은 무엇입니까?

콘텐츠를 자르지 않고 DIV를 가로 및 세로로 가운데에 배치

DIV를 세로 및 가로로 가운데에 맞추려면 창이 닫히더라도 콘텐츠가 그대로 유지되도록 하는 것이 중요합니다. 콘텐츠 자체보다 작아집니다.

일반적인 접근 방식 중 하나는 절대 위치 지정과 음수 여백을 포함합니다. 그러나 이 방법을 사용하면 창 크기가 줄어들면 콘텐츠가 잘릴 수 있습니다.

최신 브라우저의 경우 Flexbox를 사용하면 더 나은 솔루션을 사용할 수 있습니다.

HTML

<div>

CSS

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

이 접근 방식은 변환을 활용하여 크기에 영향을 주지 않고 콘텐츠를 번역합니다. 결과적으로 창 크기에 관계없이 콘텐츠가 중앙에 유지됩니다.

위 내용은 콘텐츠를 자르지 않고 DIV를 가로 및 세로 가운데에 배치하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!