CSS를 사용하여 브라우저 창에서 요소를 중앙에 어떻게 배치합니까?

브라우저 창 중앙에 요소 배치

웹 요소를 브라우저 창 중앙에 정확히 배치하는 것이 일반적인 요구 사항일 수 있습니다. 크기나 기타 요인에 관계없이 브라우저 창. 이는 CSS 위치 지정 속성을 사용하여 달성할 수 있습니다.

해결책:

브라우저 창 내에서 요소를 중앙에 배치하려면 다음을 사용합니다. CSS:

div#wrapper {
    position: absolute;
    top:  50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

설명:

• 위치: 절대; 일반 흐름에서 요소를 제거하여 위치를 지정할 수 있도록 합니다. 정확하게.
• 상위: 50%; 요소의 상단을 브라우저 창 상단에서 50% 위치에 배치합니다.
• 왼쪽: 50%; 요소의 왼쪽 가장자리를 브라우저 창 왼쪽 가장자리에서 50% 위치에 배치합니다. .
• 변환: 이동(-50%,-50%); 요소의 위치를 ​​조정합니다. 수평 및 수직 방향 모두에서 효과적으로 50% 오프셋됩니다. 이렇게 하면 요소가 원래 영역의 중앙에 배치됩니다.

이러한 속성을 결합하면 크기나 레이아웃에 관계없이 브라우저 창 내에서 모든 HTML 요소를 정확하게 중앙에 배치할 수 있습니다.

위 내용은 CSS를 사용하여 브라우저 창에서 요소를 중앙에 어떻게 배치합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!