CSS를 사용하여 브라우저 창에서 HTML 요소를 가운데에 배치하려면 어떻게 해야 합니까?

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

크기를 무시하고 HTML 요소를 브라우저 창 범위 내에서 정확히 중간에 배치하는 것이 목표인 경우 브라우저 도구 모음 레이아웃 및 화면 해상도에 따라 구체적인 접근 방식이 필요합니다.

해결책에는 요소를 분리하는 CSS position:absolute 속성을 사용하는 것이 포함됩니다. 일반적인 문서 흐름에서 벗어나 정확한 좌표에 배치할 수 있습니다. 또한 상단 및 왼쪽을 50%로 설정하면 요소가 창 내 수직 및 수평 중간 지점에 배치됩니다.

이 초기 위치에서 시각적 중심으로 요소를 오프셋하려면 다음과 같은 변환 속성을 활용해야 합니다. 번역(-50%,-50%). 이렇게 하면 앵커 포인트(상단 및 왼쪽)가 조정된 후에도 요소가 중앙에 유지됩니다.

원하는 효과를 얻기 위한 해당 CSS 코드는 다음과 같습니다.

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

구현하여 이 코드를 사용하면 외부 요인에 관계없이 HTML 요소를 브라우저 창 중앙에 정확하게 배치할 수 있습니다.

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