Jak przejść do ustawiania a <div>na środku ekranu za pomocą jQuery?

Lubię dodawać funkcje do jQuery, aby ta funkcja pomogła:

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

Teraz możemy po prostu napisać:

$(element).center();

Demo: skrzypce (z dodanym parametrem)

Umieszczam tutaj wtyczkę jquery

BARDZO KRÓTKA WERSJA

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

KRÓTKA WERSJA

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

Aktywowane przez ten kod:

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

WERSJA WTYCZKI

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

Aktywowane przez ten kod:

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

czy to prawda?

AKTUALIZACJA :

Od sztuczek CSS

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

Polecam narzędzie jQueryUI Position

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

co daje znacznie więcej możliwości niż tylko centrowanie ...

Oto mój wybór. Skończyło się to na moim klonie Lightbox. Główną zaletą tego rozwiązania jest to, że element pozostanie automatycznie wyśrodkowany nawet po zmianie rozmiaru okna, co czyni go idealnym do tego rodzaju użytkowania.

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

Możesz użyć CSS samodzielnie, aby wyśrodkować:

Przykład roboczy

.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() pozwala na wykonywanie podstawowych obliczeń w css.

Dokumentacja MDN dla calc()
tabeli obsługi przeglądarki

Rozwijam świetną odpowiedź udzieloną przez @TonyL. Dodaję Math.abs (), aby zawinąć wartości, a także biorę pod uwagę, że jQuery może być w trybie „bez konfliktu”, jak na przykład w WordPress.

Zalecam zawijanie górnych i lewych wartości Math.abs (), jak to zrobiłem poniżej. Jeśli okno jest zbyt małe, a okno modalne ma zamknięte okno u góry, zapobiegnie to problemowi, że okno nie jest widoczne. Funkcja Tony'ego miałaby potencjalnie wartości ujemne. Dobrym przykładem tego, jak skończysz z wartościami ujemnymi, jest posiadanie dużego, wyśrodkowanego okna dialogowego, ale użytkownik końcowy zainstalował kilka pasków narzędzi i / lub zwiększył domyślną czcionkę - w takim przypadku zamknij okno w oknie dialogowym modalnym (jeśli u góry) może nie być widoczny i można go kliknąć.

Inną rzeczą, którą robię, jest nieco przyspieszając, buforując obiekt $ (window), aby ograniczyć dodatkowe przejścia DOM i używać CSS klastra.

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

Aby użyć, zrobiłbyś coś takiego:

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

Chciałbym użyć funkcji interfejsu użytkownika jQuery position .

Zobacz działające demo .

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

Jeśli mam div z identyfikatorem „test” do wyśrodkowania, poniższy skrypt wyśrodkuje div w oknie na gotowym dokumencie. (wartości domyślne „my” i „at” w opcjach pozycji to „środek”)

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

Chciałbym naprawić jeden problem.

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

Powyższy kod nie będzie działał w przypadkach, gdy this.height(załóżmy, że użytkownik zmienia rozmiar ekranu, a treść jest dynamiczna) i na scrollTop() = 0przykład:

window.heightjest 600
this.heightjest650

600 - 650 = -50  

-50 / 2 = -25

Teraz pole jest wyśrodkowane -25poza ekranem.

To nie zostało przetestowane, ale coś takiego powinno działać.

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

Nie sądzę, aby pozycja absolutna była najlepsza, jeśli chcesz, aby element zawsze był wyśrodkowany na środku strony. Prawdopodobnie potrzebujesz stałego elementu. Znalazłem inną wtyczkę centrowania jquery, która używała stałego pozycjonowania. Nazywa się to stałym centrum .

Element przejściowy tej funkcji działał dla mnie bardzo źle w Chrome (nie testowałem gdzie indziej). Zmieniłem rozmiar okna o kilka, a mój element trochę jakby się przesuwał, próbując go dogonić.

Więc następująca funkcja komentuje to. Ponadto dodałem parametry przekazywania opcjonalnych boolanów x&y, jeśli chcesz wyśrodkować w pionie, ale nie w poziomie, na przykład:

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

Aby wyśrodkować element względem okienka przeglądarki (okna), nie używaj position: absolute, poprawna wartość pozycji powinna wynosićfixed (absolutnie oznacza: „Element jest pozycjonowany względem pierwszego pozycjonowanego (niestatycznego) elementu przodka”).

Ta alternatywna wersja proponowanej wtyczki środkowej używa „%” zamiast „px”, więc po zmianie rozmiaru okna zawartość jest wyśrodkowana:

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

Musisz umieścić, margin: 0aby wykluczyć marginesy zawartości z szerokości / wysokości (ponieważ używamy pozycji ustalonej, marginesy nie mają sensu). Zgodnie z dokumentacją jQuery przy użyciu.outerWidth(true) powinno zawierać marginesy, ale nie działało zgodnie z oczekiwaniami, gdy próbowałem w Chrome.

50*(1-ratio)Pochodzi z:

Szerokość okna: W = 100%

Szerokość elementu (w%): w = 100 * elementWidthInPixels/windowWidthInPixels

Obliczyć lewy środek:

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

To jest świetne. Dodałem funkcję oddzwaniania

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

Edytować:

Jeśli pytanie mnie czegoś nauczyło, to tak: nie zmieniaj czegoś, co już działa :)

Dostarczam (prawie) dosłownie kopię tego, jak to było obsługiwane na http://www.jakpsatweb.cz/css/css-vertical-center-solution.html - jest mocno zhakowany dla IE, ale zapewnia czysty sposób CSS odpowiadając na pytanie:

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

Uruchomiłem to za pomocą przeglądarek i wydaje się, że jest w porządku; jeśli nic więcej, zachowam oryginał poniżej, aby obsłużyć procent marży zgodnie z wymaganiami CSS ujrzał światło dzienne.

Oryginalny:

Wygląda na to, że jestem spóźniony na przyjęcie!

Niektóre komentarze powyżej sugerują, że jest to pytanie CSS - oddzielenie obaw od wszystkich. Pozwolę sobie powiedzieć, że CSS naprawdę postrzelił się w tę stopę. Mam na myśli, jak łatwo byłoby to zrobić:

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

Dobrze? Lewy górny róg kontenera znalazłby się na środku ekranu, a przy ujemnych marginesach zawartość magicznie pojawi się ponownie w absolutnym środku strony! http://jsfiddle.net/rJPPc/

Źle! Poziome ustawienie jest w porządku, ale w pionie ... Och, rozumiem. Najwyraźniej w css, przy ustawianiu górnych marginesów w%, wartość jest obliczana jako procent zawsze w stosunku do szerokości zawierającego bloku . Jak jabłka i pomarańcze! Jeśli nie ufasz mi ani Mozilli doco, zagraj przy skrzypcach powyżej, dostosowując szerokość treści i daj się zaskoczyć.

Teraz, gdy CSS był moim chlebem i masłem, nie zamierzałem się poddawać. Jednocześnie wolę rzeczy łatwe, więc pożyczyłem ustalenia czeskiego guru CSS i sprawiłem, że stał się sprawnym skrzypkiem. Krótko mówiąc, tworzymy tabelę, w której wyrównanie pionowe jest ustawione na środku:

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

I wtedy pozycja treści jest dostrajana z dobrym starym marginesem: 0 auto; :

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

Działające skrzypce zgodnie z obietnicą: http://jsfiddle.net/teDQ2/

Mam tutaj metodę „centrowania”, która zapewnia, że ​​element, który próbujesz wyśrodkować, ma nie tylko „ustalone” lub „absolutne” pozycjonowanie, ale także zapewnia, że ​​element, którego centrujesz, jest mniejszy niż jego element nadrzędny, to centruje a element względny jest nadrzędny, jeśli element nadrzędny jest mniejszy niż sam element, splądruje DOM do następnego elementu nadrzędnego i wyśrodkuje go względem tego.

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

używam tego:

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

Proszę użyć tego:

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

masz słabe przejście, ponieważ dostosowujesz położenie elementu za każdym razem, gdy dokument jest przewijany. To, czego chcesz, to zastosować ustalone pozycjonowanie. Próbowałem tej centralnej wtyczki wymienionej powyżej i wydaje się, że to dobrze rozwiązuje problem. Stałe pozycjonowanie pozwala wyśrodkować element raz, a właściwość CSS zadba o utrzymanie tej pozycji za każdym razem, gdy przewijasz.

Oto moja wersja. Mogę to zmienić po przejrzeniu tych przykładów.

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

Nie potrzeba do tego jquery

Użyłem tego do wyśrodkowania elementu Div. Styl 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;
}

Otwarty element

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

});

MOJA AKTUALIZACJA ODPOWIEDZI TONY'A To jest zmodyfikowana wersja jego odpowiedzi, której używam teraz religijnie. Pomyślałem, że podzielę się tym, ponieważ dodaje on nieco więcej funkcjonalności dla różnych sytuacji, na przykład różnych typówposition lub tylko chcących centrowania w poziomie / w pionie, a nie w obu przypadkach.

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

W moim <head>:

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

Przykłady użycia:

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

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

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

Działa z każdym rodzajem pozycjonowania i można go łatwo używać w całej witrynie, a także łatwo przenosić na dowolną inną utworzoną witrynę. Nigdy więcej irytujących obejść dla prawidłowego centrowania czegoś.

Mam nadzieję, że jest to przydatne dla kogoś tam! Cieszyć się.

Jest na to wiele sposobów. Mój obiekt jest ukryty z wyświetlaczem: żaden tylko wewnątrz znacznika BODY, więc pozycjonowanie jest względne względem BODY. Po użyciu $ („# object_id”). Show () wywołuję $ ( "# object_id"). Centrum ()

Używam pozycji: absolutna, ponieważ możliwe jest, szczególnie na małym urządzeniu mobilnym, że okno modalne jest większe niż okno urządzenia, w którym to przypadku część zawartości modalnej może być niedostępna, jeśli pozycjonowanie zostanie naprawione.

Oto mój gust oparty na odpowiedziach innych i moich konkretnych potrzebach:

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

Możesz użyć translatewłaściwości CSS :

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

Przeczytaj ten post, aby uzyskać więcej informacji.

Normalnie zrobiłbym to tylko z CSS ... ale skoro poprosiłeś cię, jak to zrobić za pomocą jQuery ...

Poniższy kod centruje div zarówno w poziomie, jak i w pionie wewnątrz kontenera:

$("#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>

(zobacz także to skrzypce )

Rozwiązanie CSS Tylko w dwóch liniach

Centralizuje ona twoją wewnętrzną działkę poziomo i pionowo.

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

}

tylko dla wyrównania w poziomie zmień

margin: 0 auto;

i dla pionu, zmień

margin: auto 0;

Po prostu powiedz: $ („# divID”). Html ($ (''). Html ($ („# divID”). Html ()));

Dlaczego nie używasz CSS do centrowania div?

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