Użycie jQuery do wyśrodkowania DIV na ekranie


760

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


20
To bardziej pytanie CSS niż pytanie jQuery. Możesz użyć metod jQuery, które pomogą Ci znaleźć pozycjonowanie w różnych przeglądarkach i zastosować odpowiednie style CSS do elementu, ale istotą pytania jest, jak wyśrodkować div na ekranie za pomocą CSS.
Chris MacDonald


2
Jeśli centrujesz div na ekranie, być może korzystasz z pozycjonowania FIXED. Dlaczego nie po prostu to zrobić: stackoverflow.com/questions/2005954/... . Rozwiązaniem jest czysty CSS, nie wymaga javascript.
Ardee Aram

Zgadzam się, metoda JavaScript wcale nie jest tak przyjazna. Szczególnie w różnych przeglądarkach.
Simon Hayter

Odpowiedzi:


1070

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)


78
Jedną zmianę zasugerowałem: Powinieneś użyć this.outerHeight () i this.outerWidth () zamiast tylko this.height () i this.width (). W przeciwnym razie, jeśli obiekt ma obramowanie lub wypełnienie, skończy się to nieco poza środkiem.
Trevor Burnham,

82
Dlaczego nie jest to natywna część funkcjonalności jQuery?
Seth Carnegie,

14
Co zrobić, jeśli nie chcę wyśrodkowywać w zawierającym <div>zamiast <body>? Może należy zmienić window, aby this.parent()lub dodać parametr dla niego.
Derek 朕 會 功夫

13
Kod w odpowiedzi powinien używać „position: fixed”, ponieważ „bezwzględny” jest obliczany od pierwszego względnego rodzica, a kod używa okna do obliczenia środka.
Diego

2
Sugerowałbym również dodanie obsługi, aby po zmianie rozmiaru okna dopasowywał element na stronie. Obecnie zachowuje oryginalne wymiary.
Webnet

143

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

Twoja funkcja działała idealnie w przypadku centrum pionowego. Wygląda na to, że nie działa w przypadku poziomego środka.
Halsafar

CSS zakłada, że ​​znasz rozmiar (przynajmniej wartości procentowe) wyśrodkowanego div, podczas gdy jQuery działa cokolwiek.
Dunc

Mój głos to CSS - o wiele prostszy i nie wymaga żadnego wymyślnego skryptu Java. Jeśli użyjesz stałej zamiast absolutnej, pozostanie ona na środku strony, nawet gdy użytkownik przewinie okno przeglądarki
użytkownik1616338

60

Polecam narzędzie jQueryUI Position

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

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


1
@Timwi - Czy na pewno koncentrujesz się na oknie zamiast dokumentu?
keithhackbarth

1
TypeError: $ (...). Pozycja nie jest funkcją
Michał Anioł

3
@Michelangelo: Potrzebujesz biblioteki jqueryUI, aby użyć funkcji .position () jako funkcji. Sprawdź: api.jqueryui.com/position/
jake

Ten fragment jest najlepszy: D. Ale ostrzegaj, że element musi być „widoczny”.
Cԃ ա ԃ

39

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

3
Myślę, że to działa dobrze ... w moim przypadku poszło nie tak z powodu responsywnego projektu: szerokość mojego div zmienia się wraz ze zmianą szerokości ekranu. To, co działa idealnie, to odpowiedź Tony'ego L, a następnie dodanie tego: $(window).resize(function(){$('#mydiv').center()}); (mydiv to modalne okno dialogowe, więc kiedy jest zamknięte, usuwam moduł obsługi zdarzenia zmiany rozmiaru).
Darren Cook

1
Czasami możesz chcieć użyć outerWidth()i outerHeight()rozważyć wypełnienie i szerokość obramowania.
Philippe Gerber

Działa to idealnie dla mnie w starszym projekcie z dokumentem typu 5, gdzie $(window).height()daje 0. Ale zmieniłem pozycję na „absolutną”.
Mychajło Adamowycz

26

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


Pamiętaj, że calc () nie jest obsługiwany w IE8, jeśli potrzebujesz obsługiwać przeglądarkę korzystającą ze strategii centrum jquery.
mbokil

14

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

Lubię twoje ulepszenia; Jednak nadal istnieje jeden problem, który zależy od dokładnie tego, czego szukasz. Brzuch będzie działał świetnie tylko wtedy, gdy użytkownik zostanie całkowicie przewinięty w górę i w lewo, w przeciwnym razie użytkownik będzie musiał przewinąć okno przeglądarki, aby przejść do paska tytułu. Aby rozwiązać ten problem, zdecydowałem się wykonać prostą instrukcję if, taką jak ta: if (top < w.scrollTop()) top = w.scrollTop();wraz z odpowiednikiem dla left. Ponownie zapewnia to inne zachowanie, które może być pożądane lub nie.
Alex Jorgenson

11

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>

8

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.


6

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

6

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 .


4

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

4

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)

4

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

4

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/


1
Problem w tym, że nie jest wyśrodkowany.
Konrad Borowski

@GlitchMr: Chciałbym podwójnej kontroli na polu pracy jutro, ale drugie skrzypce pracował dobrze w Chrome / Safari Mac
ov

Tak, sprawdziłem w Chrome, Firefox i Internet Explorer 8+ (IE7 nie działa) i działa. Ale to nie działa w Operze ... i to jest bardzo dziwne, biorąc pod uwagę, że jest to prosty CSS i działa w innych przeglądarkach.
Konrad Borowski,

@GlitchMr: dzięki za pilnowanie tak starego pytania. Mam zaktualizowany skrzypcach powyższy link, aby pokazać „prawidłową” odpowiedź - daj mi znać, jeśli działa dla Ciebie (lub downvote w zapomnienie Miałem swoje szanse :).!
ov

Heh, wszystko, co zrobię, to nie poprawiać głosu, chyba że pokaże się poprawna odpowiedź (obecnie nadal nie działa w Operze, ale myślę, że to błąd przeglądarki) ... oh czekaj ... to działa, jeśli zmienię rozmiar okna, a nie jeśli zmienię rozmiar okien w samym JSFiddle. Więc to działa :). Przepraszam za to. Ale nadal powinieneś ostrzec, że to nie działa w IE7. +1. Aha, i myślę, że to działa w IE6 ...
Konrad Borowski

3

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

2

używam tego:

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

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

0

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.


0

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

0

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

});

Czy zapomniałeś dołączyć HTML do swojej odpowiedzi?
Ben

0

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


0

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

0

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

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

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


1
W przypadku czegoś takiego chcesz ustawić swój, left: 50%a top: 50%następnie możesz użyć translacji przekształcenia, aby poprawnie przesunąć jego punkt środkowy. Jednak dzięki tej metodzie przeglądarki takie jak Chrome później zniekształcają / rozmazują tekst, co zwykle nie jest pożądane. Lepiej jest uchwycić szerokość / wysokość okna, a następnie ustawić lewy / górny w oparciu o to, zamiast mieszać się z transformacją. Zapobiega zniekształceniom i działa w każdej przeglądarce, na której testowałem.
Fata1Err0r

0

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 )


0

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;

0

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


-6

Dlaczego nie używasz CSS do centrowania div?

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

2
W twoim przykładzie górna / lewa strona div będzie tam, gdzie powinno być centrum.
Cristi Mihai,
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.