콘텐츠 트리밍 없이 DIV를 수직 및 수평 중앙에 배치하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

콘텐츠 트리밍 없이 DIV를 수직 및 수평 중앙에 배치하는 방법은 무엇입니까?

Barbara Streisand

풀어 주다： 2024-12-16 01:19:10

원래의

885명이 탐색했습니다.

How to Vertically and Horizontally Center a DIV Without Content Trimming?

내용을 자르지 않고 수직 및 수평 DIV 중앙에 배치>
내용을 자르지 않고 DIV를 수직 및 수평으로 중앙에 배치하는 것에 대한 우려 사항은 일반적인 것. 절대 위치 지정과 음수 여백을 사용하는 기존 접근 방식이 작동할 수 있지만 창 크기가 DIV 콘텐츠보다 작아지면 콘텐츠가 잘릴 수 있습니다.

다행히 최신 브라우저의 경우, 더 발전된 것들이 있어요 옵션:

Flexbox

HTML:

<div>
<br><p>CSS:</p>
<br><pre class="brush:php;toolbar:false">.content {<br> 위치: 절대;<br> 왼쪽: 50%;<br> 위쪽: 50%;<br> -webkit-transform: 번역(-50%, -50%);<br> 변환: 번역( -50%, -50%);<br>}<br>

이 솔루션은 변환 속성을 활용하여 DIV 콘텐츠를 양방향으로 50% 변환하여 중심이 중심과 정렬되도록 합니다. 의 창.

참고: Flexbox는 다음 버전에서 널리 지원되지 않습니다. 이전 브라우저이므로 이 솔루션을 구현할 때 브라우저 호환성을 고려하는 것이 중요합니다.

로그인 후 복사

위 내용은 콘텐츠 트리밍 없이 DIV를 수직 및 수평 중앙에 배치하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!