> 웹 프론트엔드 > CSS 튜토리얼 > 콘텐츠 트리밍 없이 DIV를 수직 및 수평 중앙에 배치하는 방법은 무엇입니까?

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

Barbara Streisand
풀어 주다: 2024-12-16 01:19:10
원래의
881명이 탐색했습니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 추천
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿