jQuery_jquery를 기반으로 한 가로 및 세로 중앙 정렬 div 창

1. CSS를 통해 가로 중심 맞추기:

코드 복사 코드는 다음과 같습니다.

.className{
margin:0 auto;
width:200px;
}

2. CSS와 수직 센터링을 통해
CSS를 통해 가로 중심과 세로 중심 div를 만드는 것은 번거로운 작업입니다. 다른 div의 크기를 미리 알아야 합니다.

코드 복사 코드는 다음과 같습니다.

.className{
width:300px
height:200px; :absolute;
왼쪽:50%;
여백:-100px 0 -150px
}

3. jQuery 센터링 및 수직 센터링을 통해 CSS 방법은 고정된 크기의 div에만 적용되므로 jQuery가 작동합니다.

코드 복사

코드는 다음과 같습니다. $(window).resize(function(){ $('.className').css({ 위치:'절대',

왼쪽: ($(window).width() - $('.className').outerWidth())/2,

위: ($(window).height() - $('.className').outerHeight())/2 $(document).scrollTop()
})
})
//초기화 함수
$(window). resize ();


이 방법의 장점은 div가 얼마나 큰지 알 필요가 없다는 것입니다. 단점은 JavaScript를 통해서만 알 수 있다는 것입니다.