jQuery Tricks - mit center() ein Element zentrieren

Funktion zur Zentrierung eines Elements/ jQuery-Objekts innerhalb der Seite

Es gibt so ein paar Dinge, die mir an jQuery fehlen. Und für die es nicht zwangsläufig ein Plugin braucht.

Beispielsweise eine Funktion zum Zentrieren eines Elementes auf der Seite.
Für diese Aufgabe existieren (wie immer) mehrere Lösungsansätze, folgender funktioniert sehr gut für mich:

Beispiel

Dieses Beispiel ist mit jQuery center() zentriert

Quelltext des Beispiels (inklusive HTML und CSS)

<button id="triggerExample">Beispiel zentriert anzeigen</button><div id="exampleDiv">
  Dieses Beispiel ist mit jQuery center() zentriert<br/><button id="close">Schliessen</button></div><style>
button#triggerExample       {}
div#exampleDiv              {display:none;box-shadow:2px 2px 2px #aaa;width:400px;height:200px;padding:20px 10px;border:1px solid #aaa;background:white}
div#exampleDiv button.close {}
</style><script>
  jQuery('document').ready(function(){

  jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("top", (($(window).height() - this.outerHeight()) / 2) + $(window).scrollTop() + "px");
    this.css("left", (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft() + "px");
    return this;
  }

    jQuery('button#triggerExample').click(function(){
      jQuery('div#exampleDiv').show();
      jQuery('div#exampleDiv').center();
    });

    jQuery('button#close').click(function(){
      jQuery('div#exampleDiv').hide();
    });

  });

</script>

Definition der jQuery-Funktion

// Definition:
// Vor jQuery(document).ready(function(){..

jQuery.fn.center = function () {
  this.css("position","absolute");
  this.css("top", (($(window).height() - this.outerHeight()) / 2) + $(window).scrollTop() + "px");
  this.css("left", (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft() + "px");
  return this;
}

// Aufruf:
$('selector').center();

Sicher auch interessant

Zur Übersicht