HTML에서 화면 중앙에 div 상자를 중앙에 배치하는 방법

DIV 상자를 화면 중앙에 맞추는 방법: CSS 속성 text-align: center; margin: auto;를 사용하세요. flexbox의 디스플레이를 사용하세요: flex; justify-content: center; 절대 위치 지정 사용: 절대; 왼쪽: 50%; 변환: 변환(-50%, -50%);.

DIV 상자를 화면 중앙에 배치하는 방법

방법 1: CSS 속성

• text-align: center;을 사용하여 컨테이너 요소를 중앙에 배치합니다.
• margin: auto; 컨테이너 요소에 자동 여백을 설정하여 컨테이너 내 요소를 중앙에 배치합니다.

HTML 코드:

<code class="html"><div style="text-align: center; margin: auto;">
  您的内容在此
</div></code>

방법 2: flexbox

• display: flex;를 사용하여 컨테이너 요소를 flexbox로 변환합니다.
• justify-content: center; 주축(수평)의 중심에 요소를 배치합니다.
• align-items: center; 교차축(세로 방향)의 중심에 요소를 배치합니다.

HTML 코드:

<code class="html"><div style="display: flex; justify-content: center; align-items: center;">
  您的内容在此
</div></code>

방법 3: 절대 위치 지정

• 위치: 절대;을 사용하여 일반 문서 흐름에서 요소를 제거합니다.
• left: 50%; 요소를 왼쪽에서 너비의 절반만큼 이동합니다.
• transform:transform(-50%, -50%); 요소를 중심점에서 너비와 높이의 절반만큼 왼쪽 및 위쪽으로 이동합니다.

HTML 코드:

<code class="html"><div style="position: absolute; left: 50%; transform: translate(-50%, -50%);">
  您的内容在此
</div></code>

추가 참고 사항:

• 경우에 따라 적절한 가운데 위치를 보장하기 위해 여백이나 기타 스타일 값을 조정해야 할 수도 있습니다.
• 컨테이너 요소가 콘텐츠를 담을 수 있을 만큼 충분히 큰지 확인하세요.
• 이 방법은 모든 최신 브라우저에서 작동합니다.

위 내용은 HTML에서 화면 중앙에 div 상자를 중앙에 배치하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!