jQuery를 사용하여 DIV를 화면 중앙에 어떻게 배치할 수 있나요?

jQuery를 사용하여 화면 중앙에 DIV

웹을 만들 때 HTML 요소를 화면 중앙에 배치하는 것은 일반적인 작업일 수 있습니다. 응용 프로그램. 이 기사에서는 이 기능을 효과적으로 구현하기 위해 jQuery를 사용하는 강력한 방법을 살펴봅니다.

해결책:

jQuery를 사용하여 DIV 요소를 화면 중앙에 배치하려면 다음 코드 조각을 활용하세요. :

jQuery.fn.center = function () {
    this.css("position", "absolute");
    this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + 
                                    $(window).scrollTop()) + "px");
    this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) + 
                                    $(window).scrollLeft()) + "px");
    return this;
};

이 함수는 DIV 요소를 화면의 절대 위치에 배치하고 요소의 상단 및 왼쪽 오프셋을 동적으로 결정합니다. 창 크기와 요소의 크기.

사용법:

함수가 정의되면 이를 호출하여 DIV 요소를 쉽게 중앙에 배치할 수 있습니다.

$(element).center();

이렇게 하면 요소를 화면의 수직 및 수평 중앙에 정확하게 배치합니다.

추가 참고:

이 함수에는 수직 오프셋을 조정하는 매개변수도 포함되어 있습니다. 예를 들어 요소를 위에서 50픽셀 중앙에 배치하려면 다음을 사용합니다.

$(element).center({top: -50});

위 내용은 jQuery를 사용하여 DIV를 화면 중앙에 어떻게 배치할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!