집 >웹 프론트엔드 >CSS 튜토리얼 >CSS만 사용하여 Div 요소를 화면 중앙에 완벽하게 배치하려면 어떻게 해야 합니까?

CSS만 사용하여 Div 요소를 화면 중앙에 완벽하게 배치하려면 어떻게 해야 합니까?

Mary-Kate Olsen원래의: 2024-12-05 18:29:12929검색

How Can I Perfectly Center a Div Element on the Screen Using Only CSS?

포지셔닝

순수 CSS를 사용하여 스크린 센터에서 요소를 완벽하게 구현

이 기사에서는

(또는 ) 요소는 화면 크기에 상관없습니다. 목표는 남은 공간을 모든 면에 고르게 분배하는 것입니다. 방법은 다음과 같습니다.

절대 위치 지정 사용

요소의 너비와 높이가 고정된 경우 절대 위치 지정이 가장 간단한 접근 방식입니다.

#divElement {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    width: 100px;
    height: 100px;
}

이 경우:

위치: 절대값은 요소를 제거합니다. 일반적인 문서 흐름.
top: 50%는 요소의 상단 위치를 뷰포트 중앙으로 설정합니다.
left: 50%는 요소의 왼쪽 위치를 뷰포트 중앙으로 설정합니다.
margin-top: -50px 및 margin-left: -50px는 내에서 위치를 조정하는 데 사용됩니다. viewport.

참고: 인라인 스타일은 유지 관리 문제를 일으키고 코드 재사용성을 방해할 수 있으므로 항상 피하세요.

다음은 JSFiddle의 실제 예제입니다. http:/ /jsfiddle.net/S5bKq/.

이 단계를 따르면 모든 항목을 효과적으로 중앙에 배치할 수 있습니다.

또는 <테이블> 화면 크기에 관계없이 웹페이지의 요소를 시각적으로 매력적인 레이아웃으로 보장합니다.

위 내용은 CSS만 사용하여 Div 요소를 화면 중앙에 완벽하게 배치하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

css using this position margin viewport table http

성명：

이전 기사：CSS 그리드와 Flexbox: 반응형 사각형을 만드는 데 가장 적합한 것은 무엇입니까?다음 기사：CSS 그리드와 Flexbox: 반응형 사각형을 만드는 데 가장 적합한 것은 무엇입니까?