내용을 보존하면서 DIV를 수평 및 수직 중앙에 어떻게 배치할 수 있습니까?

콘텐츠 보존을 통해 DIV를 가로 및 세로로 가운데 배치

DIV를 가로 및 세로로 정렬하는 것이 중요하고 콘텐츠를 유지해야 하는 상황에서 그대로 유지하려면 음수를 사용하여 절대 위치 지정의 단점을 피하는 접근 방식을 찾는 것이 필요합니다. 여백.

Flexbox는 콘텐츠를 잘 정렬하는 최신 솔루션을 제공하지만 이전 브라우저에는 적합하지 않을 수 있습니다. 더 폭넓은 호환성을 위해 다음 방법을 고려하세요.

HTML:

<div>
<p>CSS:</p>
<pre class="brush:php;toolbar:false">.content {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

이 접근 방식은 절대 위치 지정 및 CSS 변환(-webkit-transform)을 활용합니다. 및 변환)을 사용하여 DIV를 중앙에 배치합니다. 변환 함수는 DIV의 위치를 ​​양방향으로 너비와 높이의 절반씩 이동합니다. 이렇게 하면 창 크기나 콘텐츠 변형에 관계없이 콘텐츠가 보존됩니다.

Codepen 또는 JSBin에서 이 기술을 자세히 살펴보고 그 효과를 확인하세요. 이전 브라우저를 지원하려면 이 스레드의 다른 부분에서 논의된 대체 방법이 필요할 수 있습니다.