Menggunakan jQuery untuk memusatkan DIV di layar


760

Bagaimana cara mengatur <div>di tengah layar menggunakan jQuery?


20
Ini lebih merupakan pertanyaan CSS daripada pertanyaan jQuery. Anda dapat menggunakan metode jQuery untuk membantu Anda menemukan posisi lintas-browser dan menerapkan gaya CSS yang tepat untuk suatu elemen, tetapi inti dari pertanyaannya adalah bagaimana memusatkan div di layar menggunakan CSS.
Chris MacDonald


2
Jika Anda memusatkan div di layar, Anda mungkin menggunakan penentuan posisi TETAP. Mengapa tidak lakukan saja ini: stackoverflow.com/questions/2005954/… . Solusinya adalah CSS murni, tidak memerlukan javascript.
Ardee Aram

Setuju, metode JavaScript sama sekali tidak ramah. Terutama lintas browser.
Simon Hayter

Jawaban:


1070

Saya suka menambahkan fungsi ke jQuery sehingga fungsi ini akan membantu:

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

Sekarang kita bisa menulis:

$(element).center();

Demo: Biola (dengan parameter tambahan)


78
Satu perubahan saya sarankan: Anda harus menggunakan this.outerHeight () dan this.outerWidth () alih-alih hanya this.height () dan this.width (). Kalau tidak, jika objek memiliki batas atau bantalan, itu akan berakhir sedikit di luar pusat.
Trevor Burnham

82
Mengapa ini bukan bagian asli dari fungsionalitas jQuery?
Seth Carnegie

14
Bagaimana jika saya tidak ingin memusatkan pada isi <div>bukan <body>? Mungkin Anda harus mengubah windowke this.parent()atau menambahkan parameter untuk itu.
Derek 朕 會 功夫

13
Kode dalam jawaban harus menggunakan "posisi: tetap" karena "mutlak" dihitung dari induk relatif pertama, dan kode tersebut menggunakan jendela untuk menghitung pusat.
Diego

2
Saya juga menyarankan menambahkan dukungan sehingga ketika ukuran jendela itu akan menyesuaikan elemen pada halaman. Saat ini tetap dengan dimensi asli.
Webnet

143

Saya meletakkan plugin jquery di sini

VERSI SANGAT SINGKAT

$('#myDiv').css({top:'50%',left:'50%',margin:'-'+($('#myDiv').height() / 2)+'px 0 0 -'+($('#myDiv').width() / 2)+'px'});

VERSI PENDEK

(function($){
    $.fn.extend({
        center: function () {
            return this.each(function() {
                var top = ($(window).height() - $(this).outerHeight()) / 2;
                var left = ($(window).width() - $(this).outerWidth()) / 2;
                $(this).css({position:'absolute', margin:0, top: (top > 0 ? top : 0)+'px', left: (left > 0 ? left : 0)+'px'});
            });
        }
    }); 
})(jQuery);

Diaktifkan oleh kode ini:

$('#mainDiv').center();

VERSI PLUGIN

(function($){
     $.fn.extend({
          center: function (options) {
               var options =  $.extend({ // Default values
                    inside:window, // element, center into window
                    transition: 0, // millisecond, transition time
                    minX:0, // pixel, minimum left element value
                    minY:0, // pixel, minimum top element value
                    withScrolling:true, // booleen, take care of the scrollbar (scrollTop)
                    vertical:true, // booleen, center vertical
                    horizontal:true // booleen, center horizontal
               }, options);
               return this.each(function() {
                    var props = {position:'absolute'};
                    if (options.vertical) {
                         var top = ($(options.inside).height() - $(this).outerHeight()) / 2;
                         if (options.withScrolling) top += $(options.inside).scrollTop() || 0;
                         top = (top > options.minY ? top : options.minY);
                         $.extend(props, {top: top+'px'});
                    }
                    if (options.horizontal) {
                          var left = ($(options.inside).width() - $(this).outerWidth()) / 2;
                          if (options.withScrolling) left += $(options.inside).scrollLeft() || 0;
                          left = (left > options.minX ? left : options.minX);
                          $.extend(props, {left: left+'px'});
                    }
                    if (options.transition > 0) $(this).animate(props, options.transition);
                    else $(this).css(props);
                    return $(this);
               });
          }
     });
})(jQuery);

Diaktifkan oleh kode ini:

$(document).ready(function(){
    $('#mainDiv').center();
    $(window).bind('resize', function() {
        $('#mainDiv').center({transition:300});
    });
);

Apakah itu benar ?

PEMBARUAN:

Dari CSS-Trik

.center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* Yep! */
  width: 48%;
  height: 59%;
}

Fungsi Anda berfungsi dengan baik untuk pusat vertikal. Tampaknya tidak berfungsi untuk pusat horizontal.
Halsafar

CSS menganggap Anda tahu ukuran (setidaknya persentase) dari div terpusat, sedangkan jQuery berfungsi apa pun.
Dunc

Pilihan saya adalah CSS - jauh lebih mudah dan tidak memerlukan skrip Java mewah. Jika Anda menggunakan fixed, bukan absolute, itu akan tetap di tengah halaman bahkan ketika pengguna menggulir jendela browser
user1616338

60

Saya akan merekomendasikan utilitas Posisi jQueryUI

$('your-selector').position({
    of: $(window)
});

yang memberi Anda lebih banyak kemungkinan daripada hanya memusatkan ...


1
@ Timwi - Apakah Anda yakin Anda berpusat pada jendela vs dokumen?
keithhackbarth

1
TypeError: $ (...). Position bukan fungsi
Michelangelo

3
@Michelangelo: Anda memerlukan pustaka jqueryUI untuk menggunakan .position () sebagai fungsi. Lihat: api.jqueryui.com/position/
jake

Cuplikan itu adalah yang terbaik: D. Tetapi berhati-hatilah, elemen itu harus "terlihat".
Cԃ ա ԃ

39

Ini dia. Saya akhirnya menggunakannya untuk klon Lightbox saya. Keuntungan utama dari solusi ini adalah bahwa elemen akan tetap terpusat secara otomatis bahkan jika jendela diubah ukurannya sehingga ideal untuk penggunaan semacam ini.

$.fn.center = function() {
    this.css({
        'position': 'fixed',
        'left': '50%',
        'top': '50%'
    });
    this.css({
        'margin-left': -this.outerWidth() / 2 + 'px',
        'margin-top': -this.outerHeight() / 2 + 'px'
    });

    return this;
}

3
Saya pikir ini bekerja dengan baik ... itu salah dalam kasus saya karena menggunakan desain responsif: lebar div saya berubah seiring perubahan lebar layar. Apa yang berfungsi dengan baik adalah jawaban Tony L dan kemudian menambahkan ini: $(window).resize(function(){$('#mydiv').center()}); (mydiv adalah dialog modal, jadi ketika ditutup saya menghapus pengatur acara ukuran.)
Darren Cook

1
Terkadang Anda mungkin ingin menggunakan outerWidth()dan outerHeight()mempertimbangkan bantalan dan lebar pembatas.
Philippe Gerber

Ini bekerja dengan baik bagi saya untuk proyek lawas dengan doc tipe 5 di mana $(window).height()memberi 0. Tapi saya telah mengubah posisi menjadi 'absolut'.
Mykhaylo Adamovych

26

Anda dapat menggunakan CSS sendiri ke pusat seperti:

Contoh Kerja

.center{
    position: absolute;
    height: 50px;
    width: 50px;
    background:red;
    top:calc(50% - 50px/2); /* height divided by 2*/
    left:calc(50% - 50px/2); /* width divided by 2*/
}
<div class="center"></div>

calc() memungkinkan Anda melakukan perhitungan dasar dalam css.

calc()Tabel dukungan Dokumentasi MDN untuk
Browser


Perlu diingat calc () tidak didukung di IE8 jika Anda perlu mendukung browser tersebut menggunakan strategi pusat jquery.
mbokil

14

Saya memperluas jawaban hebat yang diberikan oleh @TonyL. Saya menambahkan Math.abs () untuk membungkus nilai-nilai, dan saya juga memperhitungkan bahwa jQuery mungkin dalam mode "tidak ada konflik", seperti misalnya di WordPress.

Saya sarankan Anda membungkus nilai atas dan kiri dengan Math.abs () seperti yang saya lakukan di bawah ini. Jika jendela terlalu kecil, dan dialog modal Anda memiliki kotak tutup di bagian atas, ini akan mencegah masalah tidak melihat kotak tutup. Fungsi Tony akan berpotensi memiliki nilai negatif. Contoh yang baik tentang bagaimana Anda berakhir dengan nilai negatif adalah jika Anda memiliki dialog berpusat besar tetapi pengguna akhir telah menginstal beberapa toolbar dan / atau meningkatkan font default - dalam kasus seperti itu, kotak tutup pada dialog modal (jika di bagian atas) mungkin tidak terlihat dan dapat diklik.

Hal lain yang saya lakukan adalah mempercepat ini sedikit dengan caching objek $ (window) sehingga saya mengurangi traversal DOM tambahan, dan saya menggunakan CSS cluster.

jQuery.fn.center = function ($) {
  var w = $(window);
  this.css({
    'position':'absolute',
    'top':Math.abs(((w.height() - this.outerHeight()) / 2) + w.scrollTop()),
    'left':Math.abs(((w.width() - this.outerWidth()) / 2) + w.scrollLeft())
  });
  return this;
}

Untuk menggunakannya, Anda akan melakukan sesuatu seperti:

jQuery(document).ready(function($){
  $('#myelem').center();
});

Saya suka peningkatan Anda; Namun, masih ada satu masalah yang saya temukan tergantung pada perilaku yang tepat yang Anda cari. Perut hanya akan bekerja dengan baik jika pengguna sepenuhnya digulir ke atas dan kiri, jika tidak pengguna harus menggulir jendela browser untuk sampai ke bar judul. Untuk mengatasi masalah itu saya memilih untuk melakukan pernyataan if sederhana seperti ini: if (top < w.scrollTop()) top = w.scrollTop();bersama dengan yang setara untuk kiri. Sekali lagi, ini memberikan perilaku berbeda yang mungkin atau mungkin tidak diinginkan.
Alex Jorgenson

11

Saya akan menggunakan fungsi UI jQuery position .

Lihat demo yang berfungsi .

<div id="test" style="position:absolute;background-color:blue;color:white">
    test div to center in window
</div>

Jika saya memiliki div dengan id "test" ke tengah maka skrip berikut akan memusatkan div di jendela pada dokumen siap. (nilai default untuk "saya" dan "at" di opsi posisi adalah "tengah")

<script type="text/javascript">
$(function(){
  $("#test").position({
     of: $(window)
  });
};
</script>

8

Saya ingin memperbaiki satu masalah.

this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");

Kode di atas tidak akan berfungsi jika this.height(anggap pengguna mengubah ukuran layar dan kontennya dinamis) dan scrollTop() = 0, misalnya:

window.heightadalah 600
this.heightadalah650

600 - 650 = -50  

-50 / 2 = -25

Sekarang kotak itu berada di tengah -25layar.


6

Ini belum teruji, tetapi sesuatu seperti ini harus bekerja.

var myElement = $('#myElement');
myElement.css({
    position: 'absolute',
    left: '50%',
    'margin-left': 0 - (myElement.width() / 2)
});

6

Saya tidak berpikir memiliki posisi absolut akan lebih baik jika Anda ingin elemen selalu terpusat di tengah halaman. Anda mungkin menginginkan elemen tetap. Saya menemukan plugin pemusatan jquery lain yang menggunakan penentuan posisi tetap. Ini disebut pusat tetap .


4

Komponen transisi dari fungsi ini bekerja sangat buruk untuk saya di Chrome (tidak menguji di tempat lain). Saya akan mengubah ukuran jendela banyak dan elemen saya akan berlari perlahan, mencoba untuk mengejar ketinggalan.

Jadi komentar fungsi berikut yang keluar. Selain itu, saya menambahkan parameter untuk meneruskan boolean x & y opsional, jika Anda ingin memusatkan secara vertikal tetapi tidak secara horizontal, misalnya:

// Center an element on the screen
(function($){
  $.fn.extend({
    center: function (x,y) {
      // var options =  $.extend({transition:300, minX:0, minY:0}, options);
      return this.each(function() {
                if (x == undefined) {
                    x = true;
                }
                if (y == undefined) {
                    y = true;
                }
                var $this = $(this);
                var $window = $(window);
                $this.css({
                    position: "absolute",
                });
                if (x) {
                    var left = ($window.width() - $this.outerWidth())/2+$window.scrollLeft();
                    $this.css('left',left)
                }
                if (!y == false) {
            var top = ($window.height() - $this.outerHeight())/2+$window.scrollTop();   
                    $this.css('top',top);
                }
        // $(this).animate({
        //   top: (top > options.minY ? top : options.minY)+'px',
        //   left: (left > options.minX ? left : options.minX)+'px'
        // }, options.transition);
        return $(this);
      });
    }
  });
})(jQuery);

4

Untuk memusatkan elemen relatif ke viewport browser (jendela), jangan gunakan position: absolute, nilai posisi yang benar harus fixed(absolut berarti: "Elemen diposisikan relatif terhadap elemen leluhur pertama yang diposisikan (bukan statis)").

Versi alternatif dari plugin pusat yang diusulkan ini menggunakan "%" dan bukan "px" sehingga ketika Anda mengubah ukuran jendela kontennya tetap di tengah:

$.fn.center = function () {
    var heightRatio = ($(window).height() != 0) 
            ? this.outerHeight() / $(window).height() : 1;
    var widthRatio = ($(window).width() != 0) 
            ? this.outerWidth() / $(window).width() : 1;

    this.css({
        position: 'fixed',
        margin: 0,
        top: (50*(1-heightRatio)) + "%",
        left: (50*(1-widthRatio))  + "%"
    });

    return this;
}

Anda perlu margin: 0mengecualikan margin konten dari lebar / tinggi (karena kami menggunakan posisi tetap, memiliki margin tidak masuk akal). Menurut dokumen jQuery menggunakan.outerWidth(true) harus menyertakan margin, tetapi tidak berfungsi seperti yang diharapkan ketika saya mencoba di Chrome.

The 50*(1-ratio)berasal dari:

Lebar Jendela: W = 100%

Lebar Elemen (dalam%): w = 100 * elementWidthInPixels/windowWidthInPixels

Mereka akan mengalkulasi bagian kiri tengah:

 left = W/2 - w/2 = 50 - 50 * elementWidthInPixels/windowWidthInPixels =
 = 50 * (1-elementWidthInPixels/windowWidthInPixels)

4

Ini bagus. Saya menambahkan fungsi panggilan balik

center: function (options, callback) {


if (options.transition > 0) {
   $(this).animate(props, options.transition, callback);
} else { 
    $(this).css(props);
   if (typeof callback == 'function') { // make sure the callback is a function
       callback.call(this); // brings the scope to the callback
   }
}

4

Edit:

Jika pertanyaannya mengajari saya sesuatu, inilah ini: jangan mengubah sesuatu yang sudah berfungsi :)

Saya memberikan (hampir) salinan kata demi kata tentang bagaimana ini ditangani di http://www.jakpsatweb.cz/css/css-vertical-center-solution.html - ini banyak diretas untuk IE tetapi menyediakan cara CSS murni untuk menjawab pertanyaan:

.container {display:table; height:100%; position:absolute; overflow:hidden; width:100%;}
.helper    {#position:absolute; #top:50%;
            display:table-cell; vertical-align:middle;}
.content   {#position:relative; #top:-50%;
            margin:0 auto; width:200px; border:1px solid orange;}

Fiddle: http://jsfiddle.net/S9upd/4/

Saya sudah menjalankan ini melalui browser dan tampaknya baik-baik saja; jika tidak ada yang lain, saya akan menyimpan yang asli di bawah sehingga penanganan persentase margin seperti yang ditentukan oleh spec CSS melihat cahaya hari.

Asli:

Sepertinya saya terlambat ke pesta!

Ada beberapa komentar di atas yang menyarankan ini adalah pertanyaan CSS - pemisahan perhatian dan semuanya. Saya perkenalkan ini dengan mengatakan bahwa CSS benar-benar menembak sendiri yang satu ini. Maksud saya, betapa mudahnya melakukan ini:

.container {
    position:absolute;
    left: 50%;
    top: 50%;
    overflow:visible;
}
.content {
    position:relative;
    margin:-50% 50% 50% -50%;
}

Baik? Sudut kiri atas wadah akan berada di tengah layar, dan dengan margin negatif konten akan secara ajaib muncul kembali di tengah-tengah mutlak halaman! http://jsfiddle.net/rJPPc/

Salah! Penentuan posisi horizontal OK, tapi secara vertikal ... Oh, begitu. Rupanya dalam css, ketika menetapkan margin atas dalam%, nilainya dihitung sebagai persentase selalu relatif terhadap lebar blok yang mengandung . Seperti apel dan jeruk! Jika Anda tidak mempercayai saya atau Mozilla doco, mainkan biola di atas dengan menyesuaikan lebar konten dan kagum.


Sekarang, dengan CSS menjadi roti dan mentega saya, saya tidak akan menyerah. Pada saat yang sama, saya lebih suka hal-hal yang mudah, jadi saya meminjam temuan seorang guru CSS Ceko dan membuatnya menjadi biola yang berfungsi. Singkatnya, kami membuat tabel di mana vertikal-align diatur ke tengah:

<table class="super-centered"><tr><td>
    <div class="content">
        <p>I am centered like a boss!</p>
    </div>
</td></tr></table>

Dan daripada posisi konten disetel dengan margin lama yang baik : 0 otomatis; :

.super-centered {position:absolute; width:100%;height:100%;vertical-align:middle;}
.content {margin:0 auto;width:200px;}​

Bekerja seperti yang dijanjikan: http://jsfiddle.net/teDQ2/


1
Masalahnya adalah itu tidak terpusat.
Konrad Borowski

@GlitchMr: Saya ingin memeriksa dua kali pada kotak kerja besok, tetapi biola kedua bekerja dengan baik di Chrome / Safari Mac
ov

Benar, saya sudah memeriksa di Chrome, Firefox dan Internet Explorer 8+ (IE7 tidak berfungsi) dan berfungsi. Tapi itu tidak berfungsi di Opera ... dan itu sangat aneh mengingat itu adalah CSS sederhana dan berfungsi di browser lain.
Konrad Borowski

@GlitchMr: terima kasih telah mengawasi pertanyaan lama seperti itu. Saya telah memperbarui tautan biola di atas untuk menunjukkan jawaban yang "benar" - beri tahu saya jika itu berhasil untuk Anda (atau turunkan suara menjadi terlupakan. Saya memiliki kesempatan! :)
Ov

Heh, semua yang akan saya lakukan adalah tidak melakukan upvoting kecuali jawaban yang tepat akan ditampilkan (saat ini masih tidak berfungsi di Opera, tapi saya pikir itu adalah bug browser) ... oh tunggu ... itu berfungsi jika saya akan mengubah ukuran jendela dan tidak jika saya akan mengubah ukuran windows di JSFiddle itu sendiri. Jadi, itu berhasil :). Saya minta maaf untuk ini. Tapi tetap saja, Anda harus memberi peringatan bahwa itu tidak bekerja di IE7. +1. Oh, dan saya pikir itu bekerja di IE6 ...
Konrad Borowski

3

Apa yang saya miliki di sini adalah metode "pusat" yang memastikan elemen yang Anda coba pusatkan tidak hanya dari penentuan posisi "tetap" atau "absolut", tetapi juga memastikan bahwa elemen yang Anda pusatkan lebih kecil daripada induknya, pusat ini dan elemen relatif adalah induk, jika elemen induk lebih kecil dari elemen itu sendiri, itu akan menjarah DOM ke induk berikutnya, dan pusatkan itu relatif terhadap itu.

$.fn.center = function () {
        /// <summary>Centers a Fixed or Absolute positioned element relative to its parent</summary>

        var element = $(this),
            elementPos = element.css('position'),
            elementParent = $(element.parent()),
            elementWidth = element.outerWidth(),
            parentWidth = elementParent.width();

        if (parentWidth <= elementWidth) {
            elementParent = $(elementParent.parent());
            parentWidth = elementParent.width();
        }

        if (elementPos === "absolute" || elementPos === "fixed") {
            element.css('right', (parentWidth / 2) - elementWidth / 2 + 'px');
        }
    };

2

saya menggunakan ini:

$(function() {
   $('#divId').css({
    'left' : '50%',
    'top' : '50%',
    'position' : 'absolute',
    'margin-left' : -$('#divId').outerWidth()/2,
    'margin-top' : -$('#divId').outerHeight()/2
  });
});

2

Silakan gunakan ini:

$(window).resize(function(){
    $('.className').css({
        position:'absolute',
        left: ($(window).width() - $('.className').outerWidth())/2,
        top: ($(window).height() - $('.className').outerHeight())/2
    });
});

// To initially run the function:
$(window).resize();

0

Anda mendapatkan transisi yang buruk karena Anda menyesuaikan posisi elemen setiap kali dokumen digulir. Yang Anda inginkan adalah menggunakan penentuan posisi tetap. Saya mencoba plugin fixed center yang tercantum di atas dan yang tampaknya menyelesaikan masalah dengan baik. Posisi tetap memungkinkan Anda untuk memusatkan elemen satu kali, dan properti CSS akan menjaga posisi itu untuk Anda setiap kali Anda menggulir.


0

Ini versi saya. Saya dapat mengubahnya setelah saya melihat contoh-contoh ini.

$.fn.pixels = function(property){
    return parseInt(this.css(property));
};

$.fn.center = function(){
    var w = $($w);
    return this.each(function(){
        $(this).css("position","absolute");
        $(this).css("top",((w.height() - $(this).height()) / 2) - (($(this).pixels('padding-top') + $(this).pixels('padding-bottom')) / 2) + w.scrollTop() + "px");
        $(this).css("left",((w.width() - $(this).width()) / 2) - (($(this).pixels('padding-left') + $(this).pixels('padding-right')) / 2) + w.scrollLeft() + "px");
    });
};

0

Tidak perlu jquery untuk ini

Saya menggunakan ini untuk pusat elemen Div. Gaya Css,

.black_overlay{
    display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);
}

.white_content {
    display: none;
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    padding: 16px;
    border: 16px solid orange;
    background-color: white;
    z-index:1002;
    overflow: auto;
}

Elemen terbuka

$(document).ready(function(){
    $(".open").click(function(e){
      $(".black_overlay").fadeIn(200);
    });

});

Apakah Anda lupa menyertakan html ke jawaban Anda?
Ben

0

PEMBARUAN SAYA UNTUK TONY L'S JAWAB Ini adalah versi modded dari jawabannya yang saya gunakan sekarang secara agama. Saya pikir saya akan membagikannya, karena menambahkan fungsionalitas sedikit lebih untuk itu untuk berbagai situasi yang mungkin Anda miliki, seperti berbagai jenisposition atau hanya menginginkan pemusatan horizontal / vertikal daripada keduanya.

center.js:

// We add a pos parameter so we can specify which position type we want

// Center it both horizontally and vertically (dead center)
jQuery.fn.center = function (pos) {
    this.css("position", pos);
    this.css("top", ($(window).height() / 2) - (this.outerHeight() / 2));
    this.css("left", ($(window).width() / 2) - (this.outerWidth() / 2));
    return this;
}

// Center it horizontally only
jQuery.fn.centerHor = function (pos) {
    this.css("position", pos);
    this.css("left", ($(window).width() / 2) - (this.outerWidth() / 2));
    return this;
}

// Center it vertically only
jQuery.fn.centerVer = function (pos) {
    this.css("position", pos);
    this.css("top", ($(window).height() / 2) - (this.outerHeight() / 2));
    return this;
}

Di saya <head>:

<script src="scripts/center.js"></script>

Contoh penggunaan:

$("#example1").centerHor("absolute")
$("#example2").centerHor("fixed")

$("#example3").centerVer("absolute")
$("#example4").centerVer("fixed")

$("#example5").center("absolute")
$("#example6").center("fixed")

Ia berfungsi dengan semua jenis posisi, dan dapat digunakan di seluruh situs Anda dengan mudah, serta mudah dibawa-bawa ke situs lain yang Anda buat. Tidak ada lagi solusi yang menyebalkan untuk memusatkan sesuatu dengan benar.

Semoga ini bermanfaat bagi seseorang di luar sana! Nikmati.


0

Banyak cara untuk melakukan ini. Objek saya tetap tersembunyi dengan tampilan: tidak ada yang tepat di dalam tag BODY sehingga penentuan posisi relatif terhadap BODY. Setelah menggunakan $ ("# object_id"). Show () , saya memanggil $ ("# object_id"). Center ()

Saya menggunakan posisi: absolut karena dimungkinkan, terutama pada perangkat seluler kecil, bahwa jendela modal lebih besar dari jendela perangkat, dalam hal ini beberapa konten modal bisa tidak dapat diakses jika penentuan posisi diperbaiki.

Inilah cita rasa saya berdasarkan jawaban orang lain dan kebutuhan spesifik saya:

$.fn.center = function () {
        this.css("position","absolute");

        //use % so that modal window will adjust with browser resizing
        this.css("top","50%");
        this.css("left","50%");

        //use negative margin to center
        this.css("margin-left",(-1*this.outerWidth()/2)+($(window).scrollLeft())+"px");
        this.css("margin-top",(-1*this.outerHeight()/2)+($(window).scrollTop())+"px");

        //catch cases where object would be offscreen
        if(this.offset().top<0)this.css({"top":"5px","margin-top":"0"});
        if(this.offset().left<0)this.css({"left":"5px","margin-left":"0"});

        return this;
    };

0

Anda dapat menggunakan translateproperti CSS :

position: absolute;
transform: translate(-50%, -50%);

Baca posting ini untuk lebih jelasnya.


1
Untuk sesuatu seperti itu, Anda ingin mengatur left: 50%dan top: 50%kemudian Anda dapat menggunakan translate untuk menggeser titik pusatnya dengan benar. Namun, dengan metode ini, browser seperti Chrome akan mendistorsi / mengaburkan teks Anda setelahnya, yang biasanya tidak diinginkan. Lebih baik untuk mengambil lebar / tinggi jendela, dan kemudian posisi kiri / atas berdasarkan itu daripada mengacaukan transformasi. Mencegah distorsi dan bekerja di setiap browser tempat saya mengujinya.
Fata1Err0r

0

Biasanya, saya akan melakukan ini dengan CSS saja ... tetapi karena Anda bertanya kepada Anda cara untuk melakukan ini dengan jQuery ...

Kode berikut memusatkan div baik secara horizontal maupun vertikal di dalam wadahnya:

$("#target").addClass("centered-content")
            .wrap("<div class='center-outer-container'></div>")
            .wrap("<div class='center-inner-container'></div>");
body {
    margin : 0;
    background: #ccc;
}

.center-outer-container {
    position : absolute;
    display: table;
    width: 100%;
    height: 100%;
}

.center-inner-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.centered-content {
    display: inline-block;
    text-align: left;
    background: #fff;
    padding : 20px;
    border : 1px solid #000;
}
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<div id="target">Center this!</div>

(Lihat juga Fiddle ini )


0

Solusi CSS Hanya dalam dua baris

Ini memusatkan div batin Anda secara horizontal dan vertikal.

#outer{
  display: flex;
}
#inner{
margin: auto;

}

hanya untuk perataan horizontal, ubah

margin: 0 auto;

dan untuk vertikal, ubah

margin: auto 0;

0

Katakan saja: $ ("# divID"). Html ($ (''). Html ($ ("# divID"). Html ()));


-6

Mengapa Anda tidak menggunakan CSS untuk memusatkan div?

#timer_wrap{  
  position: fixed;
  left: 50%;
  top: 50%;
} 

2
Dalam contoh Anda, bagian atas / kiri div akan berada di tempat yang seharusnya menjadi pusatnya.
Cristi Mihai
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.