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

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)

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

Saya akan merekomendasikan utilitas Posisi jQueryUI

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

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

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

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

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

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.

Ini belum teruji, tetapi sesuatu seperti ini harus bekerja.

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

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 .

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

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)

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

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/

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

saya menggunakan ini:

$(function() {
   $('#divId').css({
    'left' : '50%',
    'top' : '50%',
    'position' : 'absolute',
    'margin-left' : -$('#divId').outerWidth()/2,
    'margin-top' : -$('#divId').outerHeight()/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();

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.

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

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

});

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.

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

Anda dapat menggunakan translateproperti CSS :

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

Baca posting ini untuk lebih jelasnya.

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 )

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;

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

Mengapa Anda tidak menggunakan CSS untuk memusatkan div?

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