Bagaimanakah Saya Boleh Memusatkan DIV pada Skrin Menggunakan jQuery?

Memusatkan DIV pada Skrin dengan jQuery

Menempatkan elemen HTML di tengah-tengah skrin boleh menjadi tugas biasa semasa membuat web aplikasi. Artikel ini meneroka kaedah yang mantap menggunakan jQuery untuk mencapai fungsi ini dengan berkesan.

Penyelesaian:

Untuk memusatkan elemen DIV pada skrin menggunakan jQuery, gunakan coretan kod berikut :

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;
};

Fungsi ini meletakkan elemen DIV secara mutlak pada skrin, menentukan atas dan kiri mengimbangi secara dinamik berdasarkan dimensi tetingkap dan dimensi elemen.

Penggunaan:

Setelah fungsi ditakrifkan, anda boleh memusatkan mana-mana elemen DIV dengan mudah dengan memanggilnya:

$(element).center();

Ini akan menyelaraskan elemen tepat di tengah menegak dan mendatar skrin.

Tambahan Nota:

Fungsi ini juga termasuk parameter untuk melaraskan offset menegak. Sebagai contoh, untuk memusatkan elemen 50 piksel dari atas, anda akan menggunakan:

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

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memusatkan DIV pada Skrin Menggunakan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!